记录一些容易忘记的知识点

v-slot

在vue v2.6.0中，新引入了v-slot指令，他取代了slot和slot-scope这两个目前已经被废弃但是未被移除的特性。

• 父页面在组件标签内插入任意内容,子组件内插糟slot控制摆放位置
  (匿名插槽,具名插槽)

插槽分类

插槽一共就三大类

1. 匿名插槽(也叫默认插槽): 没有命名,有且只有一个
2. 具名插槽: 相对匿名插槽组件slot标签带name命名的
3. 作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)

匿名插槽(也叫默认插槽default)

用法:我的理解,匿名插糟只需要一个

父页面:

 <todo-list> 
        <template v-slot:default>
              任意内容
             <p>我是匿名插槽 </p>
        </template>
</todo-list>    
//v-slot:default写上感觉和具名写法比较统一,容易理解,也可以不用写

子组件 todoList.vue

<slot>我是默认值</slot>
##显示##
// 任意内容
// 我是匿名插槽

具名插槽(name)

用法:我的理解,和匿名插槽比较,就是必须起名todo对应,可以有多个具名插槽.(没了~)
父页面

 <todo-list> 
        <template v-slot:todo>
              任意内容
             <p>我是匿名插槽 </p>
        </template>
</todo-list>  
// todo
data() {
     return {
       dynamicSlotName:"todo"  
     }

 },

子组件

<slot name="todo">我是默认值</slot>
##显示##
// 任意内容
// 我是匿名插槽

动态命名

v-slot:{dynamicSlotName}//替换标签上 v-slot:todo

具名插槽缩写(匿名插槽用法)

• #todo 替换标签上 v-slot:todo
• #default 替换标签上 v-slot:todo
  父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

作用域插槽

1.重点是slotProps接取子组件里:user="user" :test="test"类似属性的数据
父页面

<todo-list>
  <template v-slot:todo="slotProps" >
      {{slotProps.user.firstName}}
  </template> 
</todo-list> 
//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"
子组件

 <slot name="todo" :user="user" :test="test">
        {{ user.lastName }}
  </slot> 
data() {
        return {
            user:{
                lastName:"Zhang",
                firstName:"yue"
            },
            test:[1,2,3,4]
        }
    },
// {{ user.lastName }}是默认数据   v-slot:todo 当父页面没有(="slotProps")
// 时显示 Zhang


## 显示 ##
// yue

解构插槽Prop

父页面 (子组件不变 显示一样)

// 相当于
function (slotProps) {
  // 插槽内容
}
(slotProps)=>参数可以用slot标签上现有的值({user,test})替换
<todo-list>
  <template v-slot:todo="{user,test}
" >
      {{user.firstName}}
  </template> 
</todo-list> 
## 显示 ##
## // yue
参数值替换名字(可以后看)

<todo-list>
  <template  v-slot:todo="{user:person,test}
" >
      {{person.firstName}}
  </template> 
</todo-list> 

// v-slot:[dynamicSlotName]="{user:person,test}
## 显示 ##
## // yue