父组件向子组件传递事件或者调用其事件
父组件：
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>