vue--插槽

2022-01-22 13:31:08 阅读：191 来源： 互联网

标签：vue title -- 插槽 Vue template 组件 todo

Vue---------------------------------vue框架为大对象，相当与主启动
Vue.components--------------------------------相当于java类，为各个小弟，万物皆组件
Vue---------------------------------插槽，功能是可以将组件中的小模块分出来，组件里面可以插入另一个组件，通过插槽来实现；符合解耦合原理，相当与java中的接口

参考：https://cn.vuejs.org/v2/guide/components-slots.html
代码演示：

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

</head>
<body>

<div id="vue">

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

</div>
<!--1、导入axiose-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--1、导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">

<!--    slot: 插槽-->
    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: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    var vm = new Vue({
       el: '#vue',
        //data属性
        data: {
            title: "狂老师列表",
            todoItems: ['春风霓裳','平凡之路','哈哈哈']
        }
    });
</script>


</body>
</html>

结果：
在这里插入图片描述
Vue.component(“todo”,{
template:
’

’
});
Vue.component(“todo-title”,{
props: [‘title’],
template: ‘ {{title}} ’
});
Vue.component(“todo-items”,{
props: [‘item’],
template: ‘

{{item}}
’
});
分析：
第一个组件相当与主启动，它调用了插槽todo-title和todo-items
第二个和第三个组件就是实现插槽todo-title和todo-items组件，自己是组件，但被其他组件调用时候是通过插槽实现的

然后页面层：
```
<div id="vue">

<todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</todo>
```
div里面是直接套的组件一，也就是自定义的标签todo,然后将组件二三以插槽的方式在页面上被todo包住，就会自动被调用他们的第一个组件以插槽方式，插入相对应的地方！！！

标签：vue,title,--,插槽,Vue,template,组件,todo
来源： https://blog.csdn.net/qq_43470725/article/details/122636184

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue--插槽