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包住，就会自动被调用他们的第一个组件以插槽方式，插入相对应的地方！！！