狂神 Vue slot插槽笔记

slot插槽

留一个代办事项，之后想添加什么再添加进来

像是这个结构，从后端要遍历数据

传统的方法是，只在一个标签中便利数据，但是要把数据放在

中的
中就很难实现

html"><li v-for="item in items">
    {{item.message}}
</li>

要保持这种结构div下一个有一个 p 标签还有一个 ul 标签，ul 标签下还有一些 li 标签，的层次结构不变，最好就使用插槽的知识，更好的进行模块化的规范，让视图层更专注的设置结构，model层能更好的传递数据，让特定的模块就会规定放在特定的位置
先提取出结构
（1）需要接受model层的数据，且数据放在p标签中，给它预留一个插槽
（2）需要接收数据的是 li 标签，放在 ul 中，预留一个插槽
所以大的结构是这样的

html">Vue.component("todo",{
    template:'\
    <div>\
        <slot name="todo-title"></slot>\
        <ul>\
            <slot name="todo-items"></slot>\
        </ul>\
    </div>'
});

用斜杠可以代替单双引号
要不然效果应该是这样的

html">template:"<div>\n" +
    "        <p></p>\n" +
    "        <ul>\n" +
    "            <li></li>\n" +
    "            <li></li>\n" +
    "            <li></li>\n" +
    "        </ul>\n" +
    "    </div>"

这个名为todo的组件中有两个插槽，名为todo-title的插槽放在div中，名为todo-items的插槽放在ul中
然后来制作这两个插槽组件

html">Vue.component("todo-title",{
   props:["title"],
   template: "<p>{{title}}</p>"
});
Vue.component("todo-items",{
    props:["item"],
    template: "<li>{{item}}</li>"
});

这两个组件要接收model层的参数，所以要加props

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="html" title=vue>vue">
    <todo>
        <todo-items slot="todo-items" v-for="item in todoItems1" v-bind:item="item"></todo-items>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
    <todo-items slot="todo-items" v-for="item in todoItems1" v-bind:item="item"></todo-items>
    <todo-title slot="todo-title" v-bind:title="title"></todo-title>
    <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>

</div>

<script src="https://cdn.jsdelivr.net/npm/html" title=vue>vue/dist/html" title=vue>vue.js">javascript"></script>

<script >javascript">
    Vue.component("todo",{
        template:'\
        <div>\
            <slot name="todo-title"></slot>\
            <ul>\
                <slot name="todo-items"></slot>\
            </ul>\
        </div>'
    });
    Vue.component("todo-title",{
       props:["title"],
       template: "<p>{{title}}</p>"
    });
    Vue.component("todo-items",{
        props:["item"],
        template: "<li>{{item}}</li>"
    });
    var vm = new Vue({
        el:'#html" title=vue>vue',
        data:{
            title:"haoyun",
            todoItems:["spring","springMVC","mybatis"],
            todoItems1:["Test1","Test2","Test3"]
        }
    });
</script>
</body>
</html>

从这里就能看出插槽对结构的规划作用，

html"><todo>
        <todo-items slot="todo-items" v-for="item in todoItems1" v-bind:item="item"></todo-items>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>