Vue $refs、$emit 组件间的通信

1.注意：

• 如果你在mounted里获取this.$refs，因为dom还未完全加载，所以你是拿不到的
• 如果写在method中，那么可以使用 this.$nextTick(() => {this.$refs.......}) 等页面渲染好再调用，这样就可以了

2.直接上源码，注释：

子组件.vue

<template>
    <div style="width:200px;height:200px; border:solid">
        <h2>子组件</h2>
        <el-button type="success" @click="sendMessageToparent">子组件向父组件发送消息</el-button>
    </div>
</template>

<script>
export default {
    data()
    {
        return{
            fromChildPara:'来自子组件的参数', //通过emit方法，发送fromChildPara数据给父组件(组件调用者)
            parentValue:'',                 //有组件调用者通信修改数据
        }
    },
    methods:{
        //主动向父组件(组件调用者)发送数据，参数为fromChildPara
        sendMessageToparent()
        {
            //FromChild为该组件的属性名称
            this.$emit("FromChild",this.fromChildPara)
        }
    },
    watch:{
        //但组件调用者通信，设置parentValue值时，监听
        'parentValue':function(newvalue,oldvalue)
        {
            alert("来自父组件的通信：newvalue="+newvalue)
        }
    }
}
</script>

组件调用者，父组件：

<template>
    <div class="fillcontain">
        <!--//1.引入组件的三步。第三
            getChild绑定子组件通信的方法
            -->
       <childCom ref="child" @FromChild="getChild"></childCom>
       <el-button type="danger" @click="sendMessageToChild">父组件向子组件发送信息</el-button>
    </div>
</template>
<script>
    //1.引入组件的三步。第一
    import childCom from '../components/test'
    export default {
        data() {
            return {
                
            };
        },
        created() {
           
        },
        components: {
            //1.引入组件的三步。第二
            childCom
        },
        methods: {
            //message来自子组件的参数
            getChild(message)
            {
                alert("来自子组件的信息："+message)
            },
            sendMessageToChild()
            {
                //向子组件主动发起通信
                this.$refs.child.parentValue=16
            }
        },
        
    };
</script>

<style lang="less">
   
</style>