App.vue
<template>
<div>
<!-- <Child @myModel="myModel"/> -->
<Child ref="myChild"/>
<div>{{ChildMessage}}</div>
<div>{{GlobalMessage}}</div>
</div>
</template>
<script>
import Child from ‘./components/Child.vue‘
export default {
name: "App",
mounted() {
this.$refs.myChild.$on("myModel",this.myModel);
this.$bus.$on("global",this.global)
},
components:{
Child
},
data(){
return{
ChildMessage:"~~~",
GlobalMessage:"~~~"
}
},
methods: {
myModel(value){
this.ChildMessage = this.ChildMessage+value
},
global(value){
this.GlobalMessage = this.GlobalMessage + value
}
},
};
</script>
<style scoped>
</style>
Child.vue
<template>
<div>
<button @click="myM">自定义组件</button>
<button @click="myG">全局事件组件</button>
</div>
</template>
<script>
export default {
name: "",
methods: {
myM(){
this.$emit("myModel","子传父")
},
myG(){
this.$bus.$emit("global","Global")
}
},
};
</script>
<style scoped>
</style>