How to use parent component to call child component events in Vue

Below I will share with you an article about Vue parent components calling child component event methods. It has a good reference value and I hope it will be helpful to everyone.

Vue parent component passes events/calls events to child components

It is not about passing data (props), it is applicable to Vue 2.0

Method 1: The child component listens to the method sent by the parent component

Method 2: The parent component calls the child component method

Child component:

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

Parent component:

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

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

That’s me I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to create components in Vue

How to dynamically add li tags and add attributes and bindings in jQuery Defined event method

How to implement default style modification in elementui

The above is the detailed content of How to use parent component to call child component events in Vue. For more information, please follow other related articles on the PHP Chinese website!