具名插槽
设置了name属性的插槽
使用:
<!--组件标签-->
<ComName>
<!--使用template标签包裹要插入插槽的内容,#:v-slot指令缩写,content:插槽名-->
<template #content>
<!--内容-->
</template>
</ComName>
作用域插槽与解构赋值
特点:在设置插槽的时候,预留了一些数据项
使用:可以通过#slotName=“” 接收
<!--设置插槽的组件——ComName-->
<slot name="content" msg="hello vue.js"></slot>
<!--解构赋值版-->
<slot name="content" msg="hello vue.js" :user="userInfo"></slot>
<!--userInfo={name:zs,age:18,sex:female}-->
<!--调用含插槽组件的组件-->
<ComName>
<template #content="obj">
<!--obj:可自定义,大多数时候使用scope接收,scope:范围,作用域-->
<p>
{{obj.msg}}
</p>
</template>
</ComName>
<!--解构赋值版-->
<ComName>
<template #content="{{msg,user}}">
<p>{{msg}}</p> //hello vue.js
<p>{{user.name}}</p> //zs
</template>
</ComName>
相关知识点:对象的解构赋值
let object1={
pro1:'content1',
pro2:'content2',
pros:'content3'
}
const {pro1,pro3}=object1;
console.log(pro1); //content1
console.log(pro2); //content2
//重命名
const {pro1:name,pro3:action}
console.log(name); //content1
console.log(action); //content2
\