使用插槽的情景:
当父元素想给子元素传递大量数据或标签时,这时用数组或字符串都不太方便,而插槽可以实现。
定义:
插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码
例如:
<body>
<div id="app">
<my-div>
<i>插槽</i>
</my-div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>
Vue.component('my-div', {
template:`<div>
<h1>hello world</h1>
<slot></slot>
</div>`
})
new Vue({
el: '#app',
data() {
return {
}
}
});
</script>
</body>
具名插槽:
Vue.component('my-div', {
template:`<div>
<h1>hello world</h1>
<slot name='cc'></slot>
</div>`
})
在向具名插槽提供内容的时候,我们可以在一个 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称:
或将v-slot:cc简写:成#cc