父组件向子组件传递事件或者调用其事件

父组件：

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>

 

 

转载于:https://www.cnblogs.com/cczlovexw/p/8183129.html