插槽slot.
我的理解，可以把多个组件（甚至可以是普通标签，文本，模板数据）通过插槽添加到另一个组件中，但是这些要看插槽是否有name属性
这个组件，也可看做是个自定义标签
一个组件中，没有slot，就不能解析其标签内部的所有字符
多个组件插入一个组件中.
<body>
<div id="app">
<todo>
<todo-title slot="slot1" :title="title"></todo-title>
<todo-item slot="slot2" v-for="item in items" :item="item"></todo-item>
</todo>
</div>
<script>
Vue.component('todo',{
template: '<div>' +
'<slot name="slot1"></slot>'+
'<ul>' +
'<slot name="slot2"></slot>' +
'</ul>' +
'</div>'
});
Vue.component('todo-title',{
props:['title'],
template: '<p>{{title}}</p>'
});
Vue.component('todo-item',{
props:['item'],
template: '<li>{{item}}</li>'
});
var vm = new Vue({
el:"#app",
data:{
title:"前后端学习",
items:['<h1>java</h1>','vue','liuyou']
},
});
</script>
</body>
测试.
demo1：slot有name属性
- 使用槽接收(需要绑定槽)
- ①普通标签数据，②组件
demo2：无name属性
- 使用槽接收
- ①普通标签数据，②组件，③文本，④模板数据
<body>
<div id="app">
<demo1 :url="data_url">
<span slot="slot">{{message}}</span>
{{ignore}}
12345
<demo2></demo2> <!-- 这个组件没有 绑定槽，会忽略 -->
</demo1>
<br>
<br>
<br>
<demo2 :url="data_url">
<span>{{message}}</span>
{{ignore}}
12345
<demo1><span slot="slot">{{message}}</span></demo1>
</demo2>
</div>
<script>
//slot 有name
Vue.component('demo1'/* 自定义标签 */,{
props:['url'],//自定义属性
template:'<a :href="url">' + //标签底层代码 使用 v-bind:href="url" 绑定内部属性
'<slot name="slot"></slot></a>'//使用槽接收(需要绑定槽)，①普通标签数据，②组件
});
Vue.component('demo2'/* 自定义标签 */,{
props:['url'],//自定义属性
template:'<a :href="url">' + //标签底层代码 使用 v-bind:href="url" 绑定内部属性
'<slot></slot></a>'//使用槽接收，①普通标签数据，②组件，③文本，④模板数据
});
var vm = new Vue({
el:"#app",
data:{
data_url: 'http://www.baidu.com',
message: '百度',
ignore: '无关数据'
},
});
</script>
</body>结果展示
