vue-$emit

作者: tutututudou | 来源:发表于2022-07-04 00:13 被阅读0次

绑定自定义事件

格式:
在父组件组件中用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')

相关文章

网友评论

      本文标题:vue-$emit

      本文链接:https://www.haomeiwen.com/subject/gmsgrrtx.html