vue 父子组件之间的通信
1. 父组件调用子组件的方法
父组件:
<template>
<div>
<button @click="clickOpen">click me</button>
<sonComponents ref="sonCom"></sonComponents>
</div>
</template>
<script>
import sonComponents from './son.vue'
export default {
components:{
sonComponents
},
data(){
return{
}
},
methods:{
clickOpen(){
//找到子组件并调用子组件方法
this.$refs.sonCom.childFun();
}
}
}
</script>
子组件:
export default {
data(){
return{
}
},
methods:{
childFun(){
alert("click me");
}
}
}
2. 子组件调用父组件方法
父组件:
<template>
<div>
<sonComponents @child-alertBox="clickOpen"></sonComponents>
</div>
</template>
<script>
import sonComponents from './son.vue'
export default {
components:{
sonComponents
},
data(){
return{
}
},
methods:{
clickOpen(text){
alert(text);
}
}
}
</script>
子组件:
<script>
export default {
data(){
return{
}
},
methods:{
childFun(){
//通过this.$emit向父组件发送信号
this.$emit("child-alertBox","我是参数");
}
}
}
</script>