vue 组件间传值
程序员文章站
2022-07-03 16:33:22
...
vue 组件间传值
父子组件间的通信
//
<body>
<div id="app">
<todo></todo>
</div>
<template id="tplTodoAdd">
<div><input type="text" v-model="input"><button @click="btn_click">添加</button></div>
</template>
<template id="tplTodoItem">
<div><!--props[ item , i ]-->
<span>{{item}}</span>
<button @click="btn_click">x</button>
</div>
</template>
<template id="tplTodoList">
<div><ul>
<li v-for="(item,i) in todos">
<todo-item :item="item" :i="i" @del="delHandler"></todo-item>
</li>
</ul></div>
</template>
<template id="tplTodo">
<div>
<h3>待办事项列表</h3>
<todo-add @add="add"></todo-add>
<todo-list :todos="todos"></todo-list>
</div>
</template>
<script>
var todoAdd={//<todo-add></todo-add>
template:"#tplTodoAdd",
data(){ return { input:"" } },
methods:{
btn_click(){
this.$emit("add",this.input)
this.input="";
}
}
};
var todoItem={//<todo-item></todo-item>
template:"#tplTodoItem",
data(){ return {} },
props:["item","i"],
methods:{
btn_click(){ this.$emit("del",this.i) }
},
mounted(){
console.log("todoItem中:"+this.item+","+this.i);
}
};
var todoList={//<todo-list></todo-list>
template:"#tplTodoList",
data(){ return { /*todos*/ } },
props:["todos"],
methods:{
delHandler(i){ this.todos.splice(i,1) }
},
mounted(){
console.log("子组件中的todos: "+this.todos);
},
components:{
todoItem//todoItem:todoItem => "todo-item":todoItem
}
};
Vue.component("todo",{//<todo></todo>
template:"#tplTodo",
data(){
return {
todos:[]/*todos:[ ... ]*/
}
},
methods:{
add(input){
this.todos.push(input);
}
},
created(){//mounted(){
//axios.get()
this.todos=["吃饭","睡觉","打亮亮"];
},
components:{
//组件名 组件对象
//"todo-add":todoAdd
//todoAdd:todoAdd
todoAdd,
todoList,
}
})
new Vue({ el:"#app" })
</script>
</body>