vue3.0 写法

• Todo.vue

<template>
  <input type="text" v-model="inputVal" />
  <button @click="addItem">add</button>
  <TodoItem 
    v-for="(item, index) in todos" 
    :key="index" 
    :item="item"
    @delete-item="deleteItem(item.index)" 
  />
</template>

<script>
import { ref } from "vue";
import TodoItem from './components/TodoItem.vue';

const useCompute = (todos, inputVal) => {
  const addItem = () => {
    todos.value.push({
      index: todos.value.length,
      text: inputVal.value,
    });
    inputVal.value = "";
  };

  const deleteItem = (index) => {
    todos.value = todos.value.filter((item) => item.index !== index);
  };

  return { addItem, deleteItem };
};

export default {
  name: "todo",
  components: {
    TodoItem
  },
  setup() { // todo
    let todos = ref([]);
    let inputVal = ref("");

    const { addItem, deleteItem } = useCompute(todos, inputVal);

    return {
      todos,
      inputVal,
      addItem,
      deleteItem,
    };
  },
};
</script>

<style>
</style>

• TodoItem.vue

<template>
  <div class="todo-item">
    <span>{{ item.text }}</span>
    <button class="delete-btn" @click="clickDelBtn(item.index)">delete</button>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  setup(props, ctx) {
    const clickDelBtn = (id) => {
      ctx.emit("delete-item", id);
    };
    return { clickDelBtn };
  },
};
</script>

<style>
.todo-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.todo-item {
  display: flex;
  width: 50%;
  align-items: center;
  justify-content: space-around;
}
</style>

vue 2.0 写法

• Todo.vue

<template>
  <input v-model="inputVal" type="text" placeholder="请输入待办事项"> 
  <button @click="addItem">添加</button>
  <div class="todo-container">
    <TodoItem 
      v-for="(item, index) in todos" 
      :key="index" 
      :item="item" 
      @delete-item="delItem"
    />
  </div>
</template>

<script>
import TodoItem from './components/TodoItem.vue';

export default {
  name: 'App',
  data() {
    return {
      inputVal: "",
      todos: []
    }
  },
  components: {
    TodoItem
  },
  methods: {
    addItem() { // 添加一项
      this.todos.push({
        index: this.todos.length,
        text: this.inputVal
      });
      this.inputVal = "";
    },
    delItem(id) { // 删除一项
      this.todos = this.todos.filter(item => item.index !== id)
    }
  }
}
</script>

<style>
</style>

• TodoItem.vue

<template>
  <div class="todo-item">
    <span>{{ item.text }}</span>
    <button class="delete-btn" @click="clickDelBtn(item.index)">delete</button>
  </div>
</template>

<script>
export default {
  props: {
    item: Object
  },
  methods: {
    clickDelBtn(id){
      this.$emit('delete-item', id);
    }
  },
  beforeUpdate() { // ？1 如何监听子组件props值的变化
    console.log(this.item)
  }
};
</script>

<style>
.todo-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.todo-item {
  display: flex;
  width: 50%;
  align-items: center;
  justify-content:space-around;
}
</style>