slot插槽

slot(插槽)

• 有什么用
• 怎么用
• slot 默认内容 (slot 后备内容)
• 具名 slot（具名插槽）
• 作用域插槽
• v-slot

有什么用

调用组件时，写在组件标签内的内容，默认不会被渲染
有时，需要组件标签内的内容能被渲染出来，slot 插槽实现

怎么用

slot的基本使用

1. 定义组件时想好要在哪个位置去渲染 slot 内容
2. 在想好的位置哪里，放置一个 slot 标签 即可 <slot></slot>
3. slot 内容 就会自动去替换 slot 标签

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

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

     Vue.component("hello", {
        template: `
          <div>            
            <h1>Hello</h1>
            <slot>
              <p>我是这个 slot 标签的默认内容</p>
            </slot>
          </div>
        `,
      });

具名 slot（具名插槽）

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

1. slot 在一个组件内是可以使用多次的
2. 给slot取了名字之后，slot 内容想要 渲染在哪个slot，就需要设置slot属性。属性的值为某个 slot 的名

• slot 有一个默认的名字，就叫做 default
  <slot></slot>
  === >
  <slot name="default"></slot>

 <div id="app">
        <text-item>
            <div>你好</div>
            <div slot='top'>加油</div>
        </text-item>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('text-item',{
            template:`
                <div>
                    <slot name='top'></slot>
                    <slot></slot>
                </div>
            `
        })
        var vm = new Vue({
            el:'#app',
            data:{
                
            }
        })
  </script>

作用域插槽

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

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

步骤

• 1.定义组件的slot的时候，将要在插槽内容中使用的数据，绑定在slot标签上
  <slot :a="msg" :b="age" ></slot>

• 2. 在插槽内容的标签上，设置 slot-scope 属性。属性值随便写。这个属性值就是上一个步骤中绑定出来的数据的一个大对象
     <p slot-scope="obj">我是一个插槽内容。msg, age</p>

     obj === { a: "hello", b: 19 }

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

 <div id="app">
        <hello>
            <p slot-scope='{a,b}'>{{b}}{{a}}</p>
        </hello>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    <script>
        Vue.component('hello',{
            data:
                function() {
                    return {
                        msg:'hello',
                        age:2
                    }
                }
           ,
            template:`
                <div>
                    <slot :a='msg' :b='age'></slot>
                    <h1>1</h1>
                </div>
            `
        })
        var vm = new Vue({
            el:'#app',
            data:{              
            },
        })

    </script>

image.png

v-slot

• 一、slot 插槽 在 2.6.0 这个版本的时候，做了更新。提供了一个新的指令叫做 v-slot。
  后续实现具名插槽与作用域插槽都使用 v-slot 来实现

• 二、2.6.0 版本在什么时候发布的：2019-02-04号（农历2018年过年那天）

• 三、v-slot语法
  v-slot:xxxx=yyyy
  xxxx 插槽名字
  yyyy 作用域插槽数据

1.v-slot 必须用在template元素上。

2. 如果插槽没有设置name名字的话： v-slot === v-slot:default

3.v-slot 简写 #
注意: 使用 简写时必须携带名字。
默认的名字需要写成：
' #default '

4. 插槽只有一个的情况下，可以不使用 template 去包裹插槽内容。而是直接将 v-slot 写在组件标签上。

     <div id="app">
      <helloworld2 #bottom>
        <p>加油</p>
      </helloworld2>
      <hr />
      <helloworld>
        <template #top>
          <p>我的天</p>
        </template>

        <template #default>
          <p>我的地</p>
        </template>
      </helloworld>

      <hr />

      <!-- 老语法的具名插槽使用 -->
      <hello>
        <p slot="top">我的天</p>

        <p slot="bottom">我的地</p>
      </hello>
      <!-- 新语法的具名插槽使用 -->
      <hello>
        <template #top>
          <p>我的天</p>
        </template>

        <template #bottom>
          <p>我的地</p>
        </template>
      </hello>

      <!-- 老语法的作用域插槽使用 -->
      <world>
        <p slot="top" slot-scope="{ msg, age }">
          我的天-{{ msg }} - {{ age }}
        </p>
      </world>

      <!-- 新语法的作用域插槽使用 -->
      <world>
        <template #top="obj">
          <p>
            我的天-{{ obj.msg }} - {{ obj.age }}
          </p>
        </template>
      </world>

      <!-- 新语法的作用域插槽使用 解构赋值-->
      <world>
        <template #top="{ msg, age }">
          <p>
            我的天-{{ msg }} - {{ age }}
          </p>
        </template>
      </world>
    </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>
            <h1>hello</h1>
            <slot name="bottom"></slot>
          </div>
        `,
      });
      Vue.component("world", {
        data() {
          return {
            msg: "张三",
            age: 18,
          };
        },
        template: `
          <div>
            <slot name="top" :msg="msg" :age="age"></slot>
            <h1>world</h1>
            <slot name="bottom"></slot>
          </div>
        `,
      });
      Vue.component("helloworld", {
        template: `
          <div>
            <slot name="top"></slot>
            <h1>helloworld</h1>
            <slot></slot>
          </div>
        `,
      });
      Vue.component("helloworld2", {
        template: `
          <div>
            <h1>helloworld2</h1>
            <slot name="bottom"></slot>
          </div>
        `,
      });
      var vm = new Vue({
        el: "#app",
      });
    </script>

自我总结(写给自己看的):
将组件标签内的内容渲染出来，使用slot插槽
然后又想在插槽内使用组件内的数据：
1.先在slot标签上用动态属性的形式接收数据,例如:
:属性名='组件内的变量名'
<slot :a='msg' :b='age'></slot>
2.在插槽内容的标签上，设置slot-scope
<p slot-scope='{a,b}'>{{b}}{{a}}</p>
3.新语法: v-slot 写在template上，
<template #top="{ msg, age }"> ====> v-slot= slot + slot-scope 具名+作用域'
4.默认：#default (default不可省略)

声明

以上仅学习笔记