- 定义相关的子组件,Vue.component
- 里面定义的相关的子组件名字,可以手动的进行引入,如:todo
- 里面用slot进行连接
- 使用v-bind:title或者直接用:title进行相关的绑定,v-for=""里面还可以使用index进行遍历。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- https://blog.csdn.net/pekaboo/article/details/107398478 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://blog.csdn.net/pekaboo/article/details/107398478"></script>
</head>
<body>
<div id="app">
{
{
message}}
<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="removeItems"></todo-items>
</todo>
</div>
<!-- 插槽 -->
<script>
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','index'],
template:"<li>{
{index}}-----{
{item}}<button v-on:click='remove'>删除 </button></li>",
methods:{
remove(){
this.$emit('remove',index);
}
}
})
var vm=new Vue({
el:'#app',
data: {
message: "success",
title:'标题2',
items: ["刘总","侯总","陈总","李哥"]
},
mounted() {
},
methods:{
removeItems(index){
this.items.splice(index,1);
}
}
})
</script>
</body>
</html>