作用域插槽
作用：父組件提供標(biāo)簽進(jìn)行渲染毙死，子組件提供數(shù)據(jù)
用法：通過給子組件模板断国，
slot標(biāo)簽添加屬性:data="數(shù)據(jù)"，這里的data變量名可以隨便起内舟，然后在父組件中引用這個data變量匿乃，首先脐往，父組件中需要通過template進(jìn)行包裹，然后使用v-slot:default="slot",來獲取子組件的實例對象扳埂，這里的slot名字可以隨便起，然后在下面調(diào)用的時候瘤礁，需要通過slot.data.數(shù)據(jù)的方式進(jìn)行調(diào)用阳懂，就能拿到子組件的數(shù)據(jù)了。
<div id="app">
<cpn1></cpn1>
<cpn1>
<template v-slot:default="slot">
<ol>
<li v-for="item in slot.data">{{ item }}</li>
</ol>
</template>
</cpn1>
</div>
<template id="cpn">
<div>
<slot :data="movies">
<ul>
<li v-for="item in movies">{{ item }}</li>
</ul>
</slot>
</div>
</template>
<script>
let cpn1 = {
template: "#cpn",
data() {
return {
movies: ['海王', '海賊王', '海爾兄弟']
}
}
}
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
cpn1
}
});
</script>
