vue组件:具名插槽,作用域插槽

254 阅读1分钟

具名插槽

设置了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

\