Vue 中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. 最终结果展示：