说明
插槽：可以理解为 占一块位置，然后可以插入组件，当有数据传入待插入组件时，再展示出来，没有数据时，插槽位置为空
有数据时
没有数时
注册组件
// 留有插槽的组件 模板里 关联有 待插入组件
Vue.component('item', {
template: '<div> \
<slot name="h4-title"></slot> \
<ul> \
<slot name="li-slot"></slot> \
</ul>\
</div>'
})
// 待插入组件
Vue.component('h4-title', {
props: ['title'],
template: '<h4>{{title}}</h4>'
})
// 待插入组件
Vue.component('li-slot', {
props: ['item'],
template: '<li>{{item}}</li>'
})
使用 item 组件
<item>
<!-- 插槽与待插入组件关联 -->
<h4-title slot="h4-title" :title="title"></h4-title>
<li-slot slot="li-slot" v-for="(item,index) in items" :item='item'> </li-slot>
</item>
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<item>
<!-- 插槽与待插入组件关联 -->
<h4-title slot="h4-title" :title="title"></h4-title>
<li-slot slot="li-slot" v-for="(item,index) in items" :item='item'> </li-slot>
</item>
</div>
<script>
Vue.component('item', {
template: '<div> \
<slot name="h4-title"></slot> \
<ul> \
<slot name="li-slot"></slot> \
</ul>\
</div>'
})
Vue.component('h4-title', {
props: ['title'],
template: '<h4>{{title}}</h4>'
})
Vue.component('li-slot', {
props: ['item'],
template: '<li>{{item}}</li>'
})
var vue = new Vue({
el: '#app',
data: {
counter: 'hello',
title: '标题',
items: ['AA', 'BB', 'CC']
}
})
</script>
</body>
</html>
版权声明：《 【Vue】slot 插槽 》为明妃原创文章，转载请注明出处！
最后编辑:2022-4-1 13:04:55