vue 父子组件通信

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>