Vue：计算属性，【内容分发】，自定义事件
1.内容分发[slot]
2.代码演示
第一步: 定义一个待办事项的组件
<div id="vue">
<todo></todo>
</div>
<script type="text/javascript">
Vue.component('todo', {
template: '<div>\
<div>待办事项</div>\
<ul>\
<li>学习狂神说Java</li>\
</ul>\
</div>'
});
</script>
第二步: 我们需要让,待办事项的标题和值实现动态绑定,怎么做呢? 我们可以留出一个插槽、
- 将上面的代码留出一个插槽,即 slot
Vue.component('todo', {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});第三步：定义一个名为 todo-title 的待办标题组件 和 todo-items 的待办内容组件
Vue.component('todo-title', {
props: ['title'],
template: '<div>{{title}}</div>'
});
//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component('todo-items', {
props: ['item', 'index'],
template: '<li>{{index + 1}}. {{item}}</li>'
});第四步：实例化 Vue 并初始化数据
var vm = new Vue({
el: '#vue',
data: {
todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
}
});第五步：这些值,通过插槽插入
- 说明:我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽中
var vm = new Vue({
el: '#vue',
data: {
todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
}
});Vue的缩写
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--<p>列表书籍</p>
<ul>
<li>Java</li>
<li>Linux</li>
<li>Python</li>
</ul>-->
<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>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!--导入Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.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: "#app",
data: {
title: "黑神",
todoItems: ['黑神说Java','黑神说Vue']
}
});
</script>
</body>
</html>
效果
