Vue的自定义事件之组件通信工具详解

<template>
  <button @click="notifyParent">触发事件</button>
</template>
<script>
export default {
  methods: {
    notifyParent() {
      // 触发名为 'custom-event' 的自定义事件，并传递数据
      this.$emit('custom-event', '这是从子组件传递的数据');
    }
  }
};
</script>

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
    <p>从子组件接收的数据：{{ receivedData }}</p>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    'child-component': ChildComponent
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleCustomEvent(data) {
      // 处理从子组件传递的数据
      this.receivedData = data;
    }
  }
};
</script>

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      newTodo: ''
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        // 触发自定义事件 'add-todo' 并传递新任务的内容
        this.$emit('add-todo', this.newTodo);
        this.newTodo = '';
      }
    }
  }
};
</script>

<template>
  <div>
    <h1>待办事项列表</h1>
    <todo-form @add-todo="addTodo"></todo-form>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
    </ul>
  </div>
</template>
<script>
import TodoForm from './TodoForm.vue';
export default {
  components: {
    'todo-form': TodoForm
  },
  data() {
    return {
      todos: []
    };
  },
  methods: {
    addTodo(newTodo) {
      // 将新任务添加到待办事项列表
      this.todos.push(newTodo);
    }
  }
};
</script>