前言

学习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
  }

}