作用域插槽的写法
2.6.0 更新作用域插槽
主要作用:让父组件能够访问子组件插槽中的子组件的数据。
vm实例:
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
cpn: {
template: '#cpn',
data() {
return {
list: ['list1', 'list2' , 'list3']
}
},
}
}
});
</script>
子组件 childCom:
<template id="cpn">
<div>
<slot :oder='list'>
<!--list是子组件data中的数据,oder是自己命名的变量,前面还有v-bind绑定-->
<ul>
<li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
</slot>
</div>
</template>
父组件 app:
<div id="app">
<cpn></cpn>
<cpn>
<template v-slot='sar'> <!--这里的sar也是自己命名的-->
<span>{{sar.oder.join('--')}}</span>
</template>
</cpn>
</div>