作用域插槽
作用域插槽,我的理解是:
第一:在子组件中绑定我们需要的数据
第二:从父组件中,通过使用已经注册的子组件标签,然后在属性slot-scope进行定义,从而使用子组件中绑定的数据。
<div id="father">
<son>
<!-- 2.获取子组件中绑定的数据info -->
<template slot-scope="slot">
<p>{{slot}}<==这就是子组件传过来的值</p>
<!--3.通过slot.data获取我们刚才传入的数据data-->
<li v-for="item in slot.data">{{item}}</li>
</template>
</son>
</div>
<template id="son">
<div>
<!--1.在slot标签中绑定子组件中的数据-->
<slot :data="info"></slot>
</div>
</template>
<script>
const app = new Vue({
el: '#father', //用于挂载要管理的元素
components: {
son: {
template: '#son',
data() {
return {
info: ['a','b','c']
}
},
}
}
})
</script>