作用域插槽slot-scope在vue中的用法
插槽slot分为:“匿名插槽”、“具名插槽”、“作用域插槽”;“作用域插槽”是需要在插槽slot上绑定数据的。然后组件模板根据slot上绑定的数据进行操作。<div id="app"><slot-tab><template slot-scope="uesr">//slot-s
·
插槽slot分为:“匿名插槽”、“具名插槽”、“作用域插槽”;
“作用域插槽”是需要在插槽slot上绑定数据的。然后组件模板根据slot上绑定的数据进行操作。
<div id="app">
<slot-tab>
<template slot-scope="uesr">//slot-scope="user"就是插槽作用域的名字,是自己定义的。
<ul>
<li v-for="item in uesr.doc">{{item}}</li>//user.doc就是取作用域中的doc数据。
</ul>
</template>
</slot-tab>
</div>
或者这样弄:(将doc进行解构)
<div id="app">
<slot-tab>
<template slot-scope="{doc}">//slot-scope="{doc}"直接将slot绑定的数据直接解构然后应用。
<ul>
<li v-for="item in doc">{{item}}</li>//此时的数据doc就是绑定的doc
</ul>
</template>
</slot-tab>
</div>
Vue.component('slot-tab',{
data:function (){
return {
doc: {
title:'i am a solt',
contion: 'i want to use the slot'
}
}
},
template:`<div><h2>noise popular people population public pub </h2><slot v-bind:doc="doc"></slot></div>`//v-bind:doc="doc"就是插槽绑定的数据。
})
var vm = new Vue({
el:'#app',
data: {}
})
总结:
1、要在模板中的slot标签上绑定数据v-bind:dd=“dd”。
2、要在使用组件时的template标签上定义作用域slot-scope=“aa”;
3、使用数据时要作用域.数据(aa.dd)
或者利用解构的语法:
2、要在用组件时的template标签上解构数据slot-scope="{dd}";(是一组大括号);
3、直接使用绑定的数据dd;
更多推荐
已为社区贡献23条内容
所有评论(0)