vue-$emit

2022-07-04  本文已影响0人  tutututudou

绑定自定义事件

格式:
在父组件组件中用v-on指令绑定一个自定义事件(代码如下:)
注意:v-on:click、v-on:change等这些事系统内置事件

App.vue

<test v-on:testEmit="talk"/>

test是App的子组件,talk是父组件的一个自己写的函数
testEmit是父组件的键名
可由子组件指定这个键名,然后父组件回调talk这个函数

test.vue

<h1>{{this.emit('testEmit')}}</h1> 不能直接调,因为vue要求插值模板要响应式数据 所以this.emit('testEmit')要写到一个方法里面

methods:{
 giveValue(){
  this.$emit('testEmit')//会调用父组件的talk方法
 },
}

本身的组件实例对象有$emit这个方法
第一个参数是去找父组件是否有自定义事件名为testEmit,有就执行这个自定义事件的回调函数talk
第二个参数是给自定义事件传值,talk回调函数形参可接收组件传过来的值

this.$emit('testEmit','go')
上一篇 下一篇

猜你喜欢

热点阅读