插槽--slot

何为插槽

当在子组件中添加元素和文本，默认是不会渲染，会直接忽略掉
插槽就是你在模板中写的HTML带入组件中的template中进行渲染

示例

    <section id="app">
        <my-cmp> 插槽: my-cmp </my-cmp>
    </section>
    <script >
        Vue.component('my-cmp',{
            template:`
            <slot></slot>
            `
        })
        const vm = new Vue({
            el:'#app',
            data(){
                return{
                }
            }
        })
    </script>

页面效果

后备内容

插槽默认使用子组件中 slot 元素中定义的值
当子组件中添加元素或文本，就是优先使用它们

编译作用域

<section id="app">
        <my-cmp> {{ msg }} </my-cmp>
 </section>

如上代码，此处打印的值是父组件中的msg的值，还是子组件中的值
结果为打印父组件中的msg的值，
因为这个打印值得位置位于父组件的作用域中
如果想要打印子组件中的msg值如下代码

 Vue.component('my-cmp', {
            data(){
                return{
                        msg:'my-cmp'
                }
            },
            template: `
            <div>
                <slot></slot>
                <div>{{this.msg}}</div>
            </div>
            `
        })

示例

<section id="app">
        <my-cmp> {{ msg }} </my-cmp>
    </section>
    <script>
        Vue.component('my-cmp-children',{
            data(){
                return{
                    msg:'my-cmp-children'
                }
            },
            template:`
            <div>
                <slot></slot>
            </div>
            `
        })
        Vue.component('my-cmp', {
            data(){
                return{
                        msg:'my-cmp'
                }
            },
            template: `
            <div>
                <slot></slot>
                <my-cmp-children>{{ msg }}</my-cmp-children>
            </div>
            `
        })
        const vm = new Vue({
            el: '#app',
            data() {
                return{
                    msg:'vm'
                }
            }
        })
    </script>

页面渲染效果

具名插槽

当我们需要多个插槽时，就像是每个人都有一个家，你不能把所有人都住一个家里
可是给 slot 起一个名字

• name 属性：给slot可以起个名字

• name属性：默认值是default

  <slot></slot> 等效于 <slot name="default"></slot>

  子组件中的元素与文本可以使用 v-slot:插槽名字 可简写为#插槽名字
  注意：v-slot只能用在 template 和 组件 上 普通元素无法使用

  示例

    <section id="app">
        <my-cmp>
              <!-- 此处的插槽明使用的缩写 需要版本Vue 2.6.0以上-->
            <template #header>
                <p>这是头部</p>
            </template>
            <template #main>
                <p>这是main</p>
            </template>
            <p>这是default</p>
        </my-cmp>
    </section>
    <script>
        Vue.component('my-cmp', {
            template: `
            <div>
                <header>
                    <slot name="header"></slot>
                </header>
                <main>
                    <slot name="main"></slot>
                </main>
                <slot></slot>
            </div>
            `
        })
        const vm = new Vue({
            el: '#app',
            data: {
            }
        })
    </script>

  页面渲染效果
  

  作用域插槽

  作用域插槽就是让插槽访问子组件的数据
  可以将数据绑定 slot 元素上
  插槽可通过 v-slot：插槽名="数据名" 获得数据对象
  注意：默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确。

  示例

  <section id="app">
        <my-cmp v-slot:default="slotProps"> {{ slotProps.msg }} </my-cmp>
        <!-- default可不写，解构插槽Prop -->
        <my-cmp v-slot="{msg}"> {{ msg }} </my-cmp>
           <!-- 动态插槽名 []可以写动态数据 需要版本Vue 2.6.0以上 -->
        <my-cmp v-slot:[name]="{msg}"> {{ msg }} </my-cmp>
    </section>
    <script>
        Vue.component('my-cmp', {
            data(){
                return {
                    msg:'This is the text !!! '
                }
            },
            template: `
            <div>
                <slot :msg="msg"></slot>
            </div>
            `
        })
        const vm = new Vue({
            el: '#app',
            data: {
                name:'default'
            }
        })
    </script>

  页面渲染效果
  

  废弃了的语法

  带有slot特性的具名插槽

自 2.6.0 起被废弃

<my-cmp>
  <template slot="header">
    <h1>头部</h1>
  </template>
  <template>
    <p>内容</p>
    <p>内容</p>
  </template>
  <template slot="footer">
    <p>底部</p>
  </template>
</my-cmp>

带有slot-scope特性的作用域插槽

自 2.6.0 起被废弃

<my-cmp>
  <template slot="default" slot-scope="slotProps">
    {{ slotProps.user.name }}
  </template>
</my-cmp>