详解vue2.6插槽更新v-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默认default

二、具名插槽(name)

父页面调用子组件
<todo-list> 
    <template v-slot:todo>
       任意内容
       <p>我是具名插槽 </p>
    </template>
</todo-list> 
 
子组件
<slot name="todo">我是默认值</slot>//name指明插槽名字
##显示##
// 任意内容
// 我是具名插槽

注意现在 <template>元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template>中的内容都会被视为默认插槽的内容。

三、作用域插槽

1.重点是slotProps接取子组件里:user=“user” :test="test"类似属性的数据，绑定在<slot> 元素上的 attribute 被称为插槽 prop。

父页面
第一种写法
<todo-list>
 <template v-slot:todo="{user,test}" > //父页面内容跟子组件对应上
   {{user.firstName}}//直接可以使用子组件属性，这里是覆盖子组件内容的
 </template> 
</todo-list> 
//第二种写法
<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

作用域插槽的由来

有时为了让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的 <current-user> 组件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>

我们可能想换掉备用内容，用名而非姓来显示。如下：

<current-user>
  {{ user.firstName }}
</current-user>

然而上述代码不会正常工作，因为只有 组件可以访问到 user 而我们提供的内容是在父级渲染的
为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 元素的一个 attribute 绑定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。