Vue组件通信

<template>
    <div>
        <!-- 
          ref：
          1. ref用于在父组件中去获取子组件/元素的对象
          2. 如果获取的子元素是一个组件，则获取到的对象是子组件实例
          3. 如果获取的子元素是一个普通的html标签，则获取到的对象是标签对应的dom对象
          4. 语法：
                a. 只需要给对应的元素绑定一个ref属性即可（属性值不能重名）
                b. 通过 this.$refs.属性值 来进行获取
                这里的this.$refs其实就是当前组件自身已经绑定的ref属性对象集合，对象属性名就是刚才通过ref属性绑定的属性值
                c. 通过对应的属性名来获取对应的对象
          5. 该套路与react后续的ref操作一致，区别在ref属性值，vue中我们可以直接写属性值，而react里属性值需要通过createRef()   useRef()等方法来创建
       -->
        <div ref="refDiv1">父组件</div>
        <div ref="refDiv2">今天是2月的最后1天，明天就是3月份</div>
        <Child ref="refChild"></Child>
        <button @click="getData">获取</button>
    </div>
</template>
<script>
import Child from "./Child.vue"
export default {
    components: {
        Child,
    },
    methods: {
        getData(){
            console.log(this.$refs);
            // 元素对应的dom获取
            console.log(this.$refs.refDiv1);
            console.log(this.$refs.refDiv2);
            // 元素对应的dom属性
            this.$refs.refDiv1.innerHTML = "0942"
            // 元素对应的实例获取
            console.log(this.$refs.refChild);
            // 元素对应的实例上属性
            console.log(this.$refs.refChild.date);
            // 元素对应的实例上的方法
            console.log(this.$refs.refChild.getDate());
        }
    }
}
</script>
<style></style>