Vue_slot插槽简单理解

最新推荐文章于 2023-01-19 21:24:56 发布

好运haoyun

最新推荐文章于 2023-01-19 21:24:56 发布

阅读量209

点赞数

分类专栏： Vue 文章标签： vue html javascript vue.js es6

本文链接：https://blog.csdn.net/qq_43439968/article/details/108425574

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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标签下

好运haoyun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_slot插槽简单理解

slot插槽留一个代办事项，之后想添加什么再添加进来像是这个结构，从后端要遍历数据传统的方法是，只在一个标签中遍历数据，但是要把数据放在 ul 中的li中就很难实现<li v-for="item in items"> {{item.message}}</li>要保持这种结构div下一个有一个 p 标签还有一个 ul 标签，ul 标签下还有一些 li 标签，的层次结构不变，最好就使用插槽的知识，更好的进行模块化的规范，让视图层更专
复制链接

扫一扫