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"/>传递方式主要用于父子组件之间,如果有三层组件,将父组件传递给第三层组件,这个方式就不合适

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值