• 10. solt 插槽


    solt :

      定义slot:(目的,有配置,没配置走默认)
      引入子组件,如果不定义某个默认的结构或者样式,那么直接写子组件的名称即可

      如果要自定义:
        1.子组件必须为双标签。
        2.子组件内写上自定义的结构或者样式并且加上slot的属性,而这个属性名要对应默认slot的名字
        3.在子组件中,包一个slot的元素,可以任意修改,在slot元素上定义一个叫做name的属性,为了好对应操作
    例子:
    //DOM部份
    <div id="app">
           <ppa>      //有配置 。显示的内容会按照默认的顺序显示,但内容会显示配置的内容
          <div slot="content">修身</div>
          <div slot="footer">修脚</div>
          <div class="xob" slot="box"></div>
        </ppa>
    </div>
    //script 部份
    Vue.component('ppa',{
            template:` //有默认 。 显示的内容会按照默认的顺序显示,但内容会显示配置的内容
                <div>
                    <slot name="box">
                        <div class="box" ></div>   
                    </slot> 
                    <slot name="content">
                        <div>中间的内容</div>   
                    </slot> 
                    <slot name="footer">
                        <div>底部的内容</div>   
                    </slot> 
                </div>
            `
        });
        
        new Vue({
            el:'#app'
        });
  • 相关阅读:
    swift学习-----字典
    Swift学习----数组
    Swift学习-----循环
    Swift学习-----可选类型
    Swift学习-----分支
    Swift学习------常量与变量
    autorelease,autoreleasepool基本使用
    SDWebImage缓存图片的机制(转)
    新闻网站项目django--分类页
    新闻网站项目django--首页
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/10241682.html
Copyright © 2020-2023  润新知