内容分发 slot
事件 $emit调用
具体实例:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item, index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="removeItem(index)"></todo-items>
</todo>
</div>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
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: "<h1>{{title}}</h1>"
});
Vue.component("todo-items",{
props: ["item", "index"],
template: "<li>{{item}} <button @click='remove(index)'>删除</button></li>",
methods: {
remove: function (index) {
this.$emit("remove", index);
}
}
});
var vm = new Vue({
el: "#app",
data: {
title: "小白",
items: ["芒果","菜菜","老婆"]
},
methods: {
removeItem: function (index) {
this.items.splice(index, 1);
}
}
});
</script>
</body>
</html>