Vue_自定义事件1

事件有两个方面：一个是绑定监听，一个是触发事件或者分发事件

使用#v-on绑定自定义事件

<my-component v-on:my-event="doSomething"></my-component>

每个Vue实例都实现了事件接口，即：

1.使用$on(eventName)监听事件

2.使用$emit(eventName,optionPayload)触发事件；传递参数一个是事件名，一个是数据

在父组件App.vue中绑定事件监听

<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader @addTodo="addTodo"/><!--给TodoHeader标签对象绑定addTodo事件监听-->
      <TodoList :todos="todos"/>
      <TodoFooter :todos="todos" :deleteCompleteTodos="deleteCompleteTodos" :selectAll="selectAll"/>
    </div>
  </div>
</template>

在子组件TodoHeader中触发事件

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="inputTodo" @keyup.enter="add"/>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        inputTodo: ''
      }
    },
    methods: {
      add () {
        // 得到输入的数据
        const inputTodo = this.inputTodo.trim()
        // 检查合法性
        if(!inputTodo) {
          alert('必须输入')
          return
        }
        // 封装一个todo对象
        const todo = {
          title: inputTodo,
          complete: false
        }
        // 添加到todos中显示
        /*触发自定义事件: addTodo*/
        this.$emit('addTodo', todo)
        // 清除输入
        this.inputTodo = ''
      }
    }
  }
</script>

<style>
</style>

这种<TodoHeader @addTodo="addTodo"/>传递方式主要用于父子组件之间，如果有三层组件，将父组件传递给第三层组件，这个方式就不合适

猜你喜欢