Slot插槽的基本使用
在这之前,如果不是很清楚组件的基本使用,可以阅读小编总结的组件的基本使用 Vue 中自定义组件使用
1.怎样去理解插槽呢?
在我们平常使用组件的时候,其实就不难发现组件能够十分灵活的将我们需要的数据设置上去,对于插槽的理解,可以理解为在模板之中套用模板,每一个插槽中相当于一个占位,可以在插槽中放置任何组件,动态插槽的实现也是十分便利在开发后的后期维护~
2.定义实现
写在前面:
业务场景描述:最近因为网站上面活动很多,所以在一小块区域内需要不断的更换页面内容,以及一些即将开放的内容,所以通过设计两个插槽用于方便动态的更新这些数据。
图解:
1.自定义组件(todo)用来存放两个插槽
Vue.component("todo",{
template: '<div>\
<slot></slot>\
<ul>\
<slot></slot>\
</ul>\
</div>\
'
})
2.定义展示标题的组件(todo-tip)
Vue.component("todo-tip",{
props: ['tip'],
template: '<div>Tip标题</div>'
})
以及展示列表的组件(todo-item)
Vue.component("todo-item",{
props: ['item'],
template: '<li>Item子项</li>'
})
3.未进行绑定展示
补充:这里展示两次的原因是每一个slot都会把全部的插件进行加载,所以这里展示了两次
4.对数据进行绑定
4.1 修改todo中的slot绑定
template: '<div>\
<slot name="todo-tip"></slot>\
<ul>\
<slot name="todo-item"></slot>\
</ul>\
</div>\
'
4.2 修改todo-tip中以及todo-item中的模板动态绑定
template: '<div>{{tip}}</div>' //todo-tip中
template: '<li>{{item}}</li>' //todo-item中
4.3 模拟部分数据
var vm = new Vue({
el: "#app",
data:{
message: '较火技术展示如下',
datas: ['java','linux','mysql']
}
})
4.4 组件以及slot双向绑定以及赋值
<todo>
<todo-tip slot="todo-tip" :tip="message"></todo-tip>
<todo-item slot="todo-item" v-for="data in datas" :item="data"></todo-item>
</todo>
5. 最终结果展示: