美文网首页程序员
Vue父组件调用子组件事件

Vue父组件调用子组件事件

作者: DerryChan | 来源:发表于2017-10-06 11:16 被阅读396次

Vue父组件向子组件传递事件/调用事件

不是传递数据(props)哦,适用于 Vue 2.0

方法一:子组件监听父组件发送的方法

方法二:父组件调用子组件方法

子组件:

export default {
    mounted: function () {
      this.$nextTick(function () {
        this.$on('childMethod', function () {
          console.log('监听成功')
        })
      })
    },
    methods {
        callMethod () {
          console.log('调用成功')
        }
    }
}

父组件:

<child ref="child" @click="click"></child>

export default {
    methods: {
      click () {
      this.$refs.child.$emit('childMethod') // 方法1
      this.$refs.child.callMethod() // 方法2
    },
    components: {
      child: child
    }
}

相关文章

  • Vue.js组件间调用及传值 2020最新更新

    Vue.js中,对于父子组件、平级组件间的事件触发、传值等。 调用 父组件 子组件 子组件调用父组件 子组件 触发...

  • Vue父组件调用子组件事件

    Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父...

  • vue 事件传递的原理

    vue的事件机制中,通过父组件模版中@一个事件,子组件emit('xx')事件名的方式实现子组件调用父组件的方法。...

  • vue.js 核心知识点三

    目录 - 3.1 vue中子组件调用父组件的方法 - 3.2 Vue父组件调用子组件的方法 - 3.3 涉及到组件...

  • vue组件通信

    vue的组件传参的方式父子组件传参1.prop和emit是子传父,子组件监听一个事件,父组件调用并接受子组件传递过...

  • 【Vue3 从入门到实战 进阶式掌握完整知识体系】014-探索组

    5、父子组件如何通过事件进行通信 子组件调用的方法让父组件处理 子组件调用父组件的方法来改变父组件的数据。子组件无...

  • vue 父组件调用子组件的方法

    父组件可以通过this.$refs调用子组件的方法 父级.vue 子级 child.vue

  • Vue.js组件传值

    子组件向父组件传值 在子组件页面触发事件$emit 在父组件中在组件标签中调用v-on事件监听 父组件向子组件传值...

  • 关于$refs的用法

    $refs父组件调用子组件的方法,可以传递数据。 示例 父组件 $refsFa.vue 子组件 emitCh.vu...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

网友评论

    本文标题:Vue父组件调用子组件事件

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