Vue-01-Slot插槽初体验
需知：
Vue是结合angularjs的模块化以及React的集大成者
slot插槽的目的是使得其更符合MVVM架构模式，替代了传统的MVC模式
- Model：java以及对数据库的操作
- View：只做视图层
- View Model：实现双向绑定，动态更新，以达前后端分离
将代码主要分为：组件，实例对象，前端三个模块
代码块如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--前端视图层：-->
<sqx>
<sqx-title slot="sqx-title" v-bind:title="title" ></sqx-title>
<sqx-items slot="sqx-items" v-for="item in sqxitems" v-bind:items="item"></sqx-items>
</sqx>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//组件
//slot插槽
Vue.component("sqx",{
template:
'<div>\
<slot name="sqx-title"></slot>\
<ul>\
<slot name="sqx-items"></slot>\
</ul>\
</div>'
});
Vue.component("sqx-title",{
props: ['title'],
template:'<div>{{title}}</div>'
});
Vue.component("sqx-items",{
props: ['items'],
template:'<li>{{items}}</li>'
});
//实例对象：存放数据
var vm =new Vue({
el:"#app",
data:{
title:'我的技术栈',
sqxitems:['javaWeb','SSM','LayUI']
},
});
</script>
</body>
</html>
总结：
结合上图和代码总结：自定义组件将组件中的数据位置设置为slot插槽然后自定义的组件进行拼接形成模板，
前端调用自定义的组件，并且绑定vue的实例对象拿到实例对象当中的数据
组件当中存在props去接受前端的数据，然后动态的传给组件当中对应的位置
