父組件向子組件傳遞事件或者調用其事件

父組件：

import aboutUs from '../common/aboutUs.vue'

  export default{

　　data () {

　　　return {

　　　　　who: 'aboutUs', // 切換彈框

　　　　　bindSuccess: false // 關於我們狀態

　　　}

　　},

   components: {

     aboutUs

    },

　　methods: {

　　/* 是否顯示關於我們 */

　　　showAboutUs () {

　　　  this.$refs.aboutUs.OpenPop() // 方法一

　　　　 this.$refs.child.$emit('childMethod') // 方法二

　　　},

　　}

  }

<component v-bind:is="who" ref="aboutUs" :unBinding="bindSuccess"></component>

　<div @click="showAboutUs"/>關於我們</div>

子組件：

export default {
  data () {
    return {
      isHadBind: false,
      bind: ''
    }
  },
  created () {
    this.bind = this.unBinding
  },
  props: {
    unBinding: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  mounted () { 
　　/* 方法二 */
 this.$nextTick(() => { 
　 　 this.$on('childMethod', () => { 
　　　 　console.log('監聽成功') 
　　 }) 
 }) 
 }，
  methods: {
    OpenPop () {
      this.bind = true
    }
  }
}

 

<div v-model="bind">
    <div class="aboutUs">
       子組件
    </div>
  </div>