使用作用域插槽的原因
由于作用域的限制,父组件在替换子组件的插槽时只能引用父组件中的数据。如果父组件在替换子组件插槽是要用子组件中的数据,就要用到作用域插槽。
作用域插槽的基本使用方法
子组件中的slot要动态绑定一个属性,用于传递数据,例如:data="xxx",父组件在替换slot的时候,早期版本需要用到template标签,绑定slot-scope="yyy"属性,然后通过绑定的yyy引用slot中传递的数据。如下:
<body>
<div id="app">
<mycpn></mycpn>
<mycpn>
<template slot-scope="slot">
<span>{{slot.data.join('-')}}</span>
</template>
</mycpn>
<mycpn>
<template slot-scope="slot">
<span>{{slot.data.join(';')}}</span>
</template>
</mycpn>
</div>
<script src="../js/vue.js"></script>
<template id="cpn">
<div>
<slot :data="fruits">
<ul>
<li v-for="item in fruits">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script>
//相当于vue的子组件
const mycpn={
template:'#cpn',
data(){
return {
title: '我是子组件标题',
fruits:['苹果','香蕉','桔子']
}
}
}
//创建并注册组件
Vue.component('mycpn',mycpn);
//vue相当于父组件
const vue = new Vue({
el:"#app",
data:{
title:"我是标题"
},
components:{
mycpn:mycpn
}
});
</script>
</body>
效果如下: