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


父组件:

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>

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM