zoukankan      html  css  js  c++  java
  • slot插槽(学习笔记)

    slot插槽(有默认值,也有名称)一般情况下通过名称进行匹配
    什么是插槽,有什么用?插槽相当于插入的一个东西,可以用来灵活的封装组件,比如说封装一个模态框
    对组件进行内容的定制,slot插槽,一对组件标签中的结构,最终会被插入到组件的模板中去的
    使用方法思路:子组件定义完成。需要灵活的改变子组件里面的东西。可以在子组件注册的标签里面写<slot></slot>来完成内容替换,当然有name来进行标识是最好的

    案例:

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <div id="app">
        <modal>
            <h1 slot="title">{{title}}</h1>
            <div slot="content">
                <p>1</p>
                <p>2</p>
                <div>我是插件的内容部分</div>
            </div>
        </modal>
    </div>
    </body>
    <script src="vue.js"></script>
    <script>
    /*
        对组件进行内容的定制
    		slot插槽
            一对组件标签中的结构,最终会被插入到组件的模板中
    */
    
    Vue.component('modal',{
        data(){
            return {
                title:"modal的标题"
            }
        },
        template:`
            <div class="box">
                <div class="title">
                    <slot name="title"></slot>
                </div>
                <div class="content">
                    <slot name="content"></slot>
                </div>
                <div class="footer">
                    我是一个底部
                </div>
            </div>
        `
    })
    
    new Vue({
        el:"#app",
        data(){
            return {
                title:'父组件title插槽'
            }
        }
    })
    </script>
    
    <style>
    .box{
        font-size:14px;
         400px;
        height: 260px;
        border:2px solid #F60;
        margin:0px auto;
    }
    .title{
        border-bottom:1px solid #999;
    }
    .content{
        border-bottom:1px solid #999;
    }
    </style>
    </html>
    

      

  • 相关阅读:
    Oracle学习(四)--sql及sql分类讲解
    Oracle学习(三)--数据类型及常用sql语句
    Oracle学习(二)--启动与关闭
    Tomcat学习笔记--启动成功访问报404错误
    有关Transaction not successfully started问题解决办法
    百度富文本编辑器UEditor1.3上传图片附件等
    hibernate+junit测试实体类生成数据库表
    js登录与注册验证
    SVN安装配置与使用
    [LeetCode] #38 Combination Sum
  • 原文地址:https://www.cnblogs.com/chengxiang123/p/8654659.html
Copyright © 2011-2022 走看看