vue的slot插槽

slot插槽

​ 调用组件时,如果在组件的里面写入内容的时候,它是不会渲染出来

​ 利用slot插槽可以渲染出来

​ slot可以把组件内部的标签渲染出来

​ \1. 定义组件时想好要在哪个位置去渲染 slot 内容

​ \2. 在想好的位置哪里，放置一个 slot 标签 即可

​ \3. slot 内容 就会自动去替换 slot 标签

例子

  <div id="box1">
            <!--
                调用组件时,如果在组件的里面写入内容的时候,它是不会渲染出来
                利用slot插槽可以渲染出来
                slot可以把组件内部的标签渲染出来
                1. 定义组件时想好要在哪个位置去渲染 slot 内容
                2. 在想好的位置哪里，放置一个 slot 标签 即可 <slot></slot>
                3. slot 内容 就会自动去替换 slot 标签
            -->
              <hello>
                  <p>ajjsajas</p>
              </hello>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
        <script>
        Vue.component('hello',{
            template:`
                 <div>
                    <slot></slot>
                    <h1>hello</h1>
                    <slot></slot>
                 </div>
            `
        })
         var vm=new Vue({
             el:"#box1",
             
           })
        </script>

slot的用法二

slot 默认内容 (slot 后备内容)

写在 slot 标签 内的内容就是这个 slot 标签 的默认内容

 <div id="box1">
        <!-- 
      一、slot 默认内容 (slot 后备内容)

      写在 slot 标签 内的内容就是这个 slot 标签 的默认内容

     -->
        <hello>
            <p>xxx</p>
        </hello>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <script>
        Vue.component('hello', {
            /*  template:`
                在template选项中默认只有一个div(根)元素,
                <div><h1>这是h1标签</h1></div>
                <div>
                    <slot>
                            <p>我是这个 slot 标签的默认内容</p>
                    </slot>
                </div>
             `,
             */
            template: `
                <div>
                    <h1>这是h1标签</h1>
                    <slot>
                            <p>我是这个 slot 标签的默认内容</p>
                    </slot>
                </div>
             `
        })
        var vm = new Vue({
            el: "#box1",
            data: {

            }
        })
    </script>

具名插槽

一、具名 slot (具名插槽)

​ 给 slot 标签 设置一个 name 属性。这时 这个 slot 标签就叫做 具名slot便签

​ （给一个茅坑加个名字，那么这个茅坑就叫做有名字的茅坑）

​ \1. slot 在一个组件内是可以使用多次的

​ \2. 给 slot 取了名字之后，slot 内容想要渲染在哪个 slot 里面的话，就需要设置 slot 属性。属性的值为某个 slot 的名字。

​ slot 有一个默认的名字，就叫做 default

​ ===

有名字的插槽

一个slot的name属性,对应的相应的内容

如果没有式插入到default这个默认中

 <div id="box1">
            <!--调用父组件-->     
            <hello>
                <!--
                    要写入的内容标签名加上slot这个个组件,还有那个value这个值
                    要渲染的内容中添加一个slot这个插槽,插槽的值是slot中name这个属性的值
                    在slot这个标签添加name属性还有定的value
                    slot这个属性名不写没有对应的属性值时,它是插入到这个name属性它值是default这个默认中
                -->
                <p slot="top">p1</p>
                <p slot="mid">p2</p>   
                <p slot="buttom">p3</p>
                <button>点击我</button>
                <button>点击我</button>
            </hello>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
        <script>
        Vue.component('hello',{
            template:`
                <div>
                    <slot name="top"></slot>
                    <br/>
                    <slot name="mid"></slot>
                    <br/>
                    <slot name="buttom"></slot>
                    <br/>
                    <slot name="default"></slot>
                    <slot></slot>
                </div>
            `
        })
         var vm=new Vue({
             el:"#box1",
             data:{
                 
             }
           })
        </script>

插槽的编译作用域

一、插槽的编译作用域

​ 1. 编译作用域：

​ 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

​ 2. 插槽的编译作用域：

​ 注意：虽然说插槽内容最终渲染在子组件内。但是他的编译作用域还是要看插槽内容写在哪个组件的template里面。

​ 而不是看插槽内容最终渲染在哪个组件的template里面的slot标签。

​ 写在组件标签内的插槽内容是不属于组件的template的。只是通过slot可以让他渲染在组件

 <div id="app">
      <!-- {{ msg }}  root -->
      <hello>
        <p>我是一个插槽内容。{{ msg }}</p>
      </hello>

      <hello></hello>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <script>
      Vue.component("hello", {
        data() {
          return {
            msg: "hello",
          };
        },
        template: `
          <div>
            <slot>
              <p>默认内容 {{ msg }}</p>
            </slot>
            <h1>Hello</h1>
          </div>
        `,
      });

      var vm = new Vue({
        data: {
          msg: "root",
        },
        el: "#app",
      });

作用域插槽

一、作用域插槽

希望 插槽内容 中使用 子组件中的作用域

     <div id="app">
        <hello>
          // xxxx 如何能够用上 hello 组件中 的 msg 数据
          <p>我是一个插槽内容。xxxx </p>
        </hello>
      </div>

​ 步骤：

​ \1. 定义组件的slot的时候，将要在插槽内容中使用的数据，绑定在 slot标签上

​ 注意，不能绑定 name 属性。因为 name 属性有特殊作用。name 属性用来做具名插槽的。

      <slot :a="msg" :b="age" ></slot>

​ \2. 在插槽内容的标签上，设置 slot-scope 属性。属性值随便写。这个属性值就是上一个步骤中绑定出来的

​ 数据的一个大对象

   <p slot-scope="obj">我是一个插槽内容。msg, age</p>

​ obj === { a: “hello”, b: 19 }

​ -->

<div id="app">
      <hello>
        <!-- slot-scope="xxx" -->
        <!-- <p slot-scope="obj">我是一个插槽内容。{{ obj.msg }} {{ obj.age }}</p> -->

        <!-- slot-scope="{ msg, age }"
          解构赋值
        -->
        <p slot-scope="{ msg, age }">
          我是一个插槽内容。{{ msg }} {{ age }}
        </p>
      </hello>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <script>
      Vue.component("hello", {
        data() {
          return {
            msg: "hello",
            age: 19,
          };
        },
        template: `
          <div>
            <slot :msg="msg" :age="age" ></slot>

            <h1>Hello</h1>
          </div>
        `,
      });

      var vm = new Vue({
        data: {
          msg: "root",
        },
        el: "#app",
      });
    </script>