slot插槽
留一个代办事项,之后想添加什么再添加进来
像是这个结构,从后端要遍历数据
传统的方法是,只在一个标签中遍历数据,但是要把数据放在 ul 中的li中就很难实现
<li v-for="item in items">
{{item.message}}
</li>
-
要保持这种结构div下一个有一个 p 标签 还有一个 ul 标签,ul 标签下还有一些 li 标签,的层次结构不变,最好就使用插槽的知识,更好的进行模块化的规范,让视图层更专注的设置结构,model层能更好的传递数据,让特定的模块就会规定放在特定的位置
-
先提取出结构
-
-
(1)需要接受model层的数据,且数据放在p标签中,给它预留一个插槽
-
(2)需要接收数据的是 li 标签,放在 ul 中,预留一个插槽
-
所以大的结构是这样的
-
Vue.component("todo",{ template:'\ <div>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </div>' });
-
用斜杠可以代替单双引号
-
要不然效果应该是这样的
-
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中
-
然后来制作这两个插槽组件
-
Vue.component("todo-title",{ props:["title"], template: "<p>{{title}}</p>" }); Vue.component("todo-items",{ props:["item"], template: "<li>{{item}}</li>" });
-
这两个组件要接收model层的参数,所以要加props
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="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/vue/dist/vue.js"></script> <script > 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:'#vue', data:{ title:"haoyun", todoItems:["spring","springMVC","mybatis"], todoItems1:["Test1","Test2","Test3"] } }); </script> </body> </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>
-
有个todo-items插槽组件被放在todo-title组件之上,但是不会影响todo插槽组件设置的结构,依旧会把todo-items组件放置在ul标签下