子组件
<template>
<div>
<button @click="chlid">点我</button>
</div>
</template>
<script>
export default {
data(){
return{
msg:1234
}
},
methods:{
chlid(){
this.$emit("fathe",this.msg);
}
}
}
</script>
父组件
<template>
<div>
<Hello @fathe="fathe" ></Hello>
{{msg}}
</div>
</template>
<script>
import Hello from"@/components/HelloWorld.vue"
export default {
data(){
return{
msg:""
}
},
components:{
Hello
},
methods:{
fathe(data){
this.msg=data
}
}
}
</script>
1.父组件引入子组件
2.父组件引用子组件,并绑定点击事件
3.子组件绑定点击事件,使用$emit(父亲点击事件,“携带的参数‘)