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