前言
学习vue文档的时候,刚好遇到用"父传子[props]","子传父[emit]"的使用方法,而且作为参考的dom只有增和删,于是想着把"修改"也做一下,就当是学习。
实际dom代码
//html部分,不含css
<div id="todo-list">
//v-on:submit.prevent 指在该表单中的任何提交按钮都可以触发该事件
<form v-on:submit.prevent="addDom">
<label for="new-todo">Add a todo</label>
<inout id="new-todo" placeholder="todo list dom">
<button>添加(add)</button>
<form/>
//预览div
<div v-for="(todo,index) in todos" :key="index.id">{{ todo.text }}<div/>
//导入子组件
<TodoList v-for="(todo, index) in todos"
key="todo.id"
:title="todo.id"
v-on:remove="todos.splice(index,1)"
v-on:modify="modifyTodoList"
/>
<div/>
//JavaScript
import TodoList from "./todoList.vue";
export defaule{
//导入组件
components:{TodoList },
data(){
return{
newTodoText: "",
todos: [
{ id: 1, text: "水果" },
{ id: 2, text: "动物" },
{ id: 3, text: "植物" },
],
nextTodoId: 4,
}
},
methods:{
//添加
addDom:function(){
this.todos.push({
id: this.nextTodoId++,
text: this.newTodoText,
})
},
//修改,向todos里面传入修改后的值,但不会覆盖原本的值
modifyTodoList(args) {
this.todos[args[0]].text = args[1]
}
}
}
子组件dom代码
<div>
<input v-model="fname">
<button v-on:click="$emit('remove')">删除(remove)</button>
<button v-on:click="$emit('modify', [idx, fname])">修改(modify)</button>
</div>
//js
export default {
data() {
return {
fname: 'name'
};
},
props: ['idx', 'title'],
mounted(){
this.fname = this.title
}
}
没有评论