Vue中ref的作用

一、获取DOM，操作DOM

        1.给dom节点标记ref属性，可以理解为给dom节点起了个名字

        2.在$refs属性中多了个元素的引用

        3.通过Vue实例$refs属性拿到这个dom元素

 <div id='app'>
        <div ref="text">
            
        </div>
    </div>
methods() {
                console.log(this.$refs);
}

二、获取组件，拿到组件中的变量

        1.给组件加上ref属性后，可以理解为给组件起了名字

        2.在$refs属性中多了个元素的引用

        3.通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。

        

 <div id='app'>
        <div ref="text">
            <son ref="son"></son>
        </div>
    </div>
    <template id="son">
        <div>
            <button @click="add">add</button>
            {{msg}}
        </div>
    </template>



Vue.component('son', {
            template: '#son',
            data() {
                return {
                    msg: 1,
                }
            },
            methods: {
                add() {
                    this.msg++
                    console.log(this.msg);
                }
            },
        })

mounted() {
                console.log(this.$refs);
                this.$refs.text.style.fontSize = '30px'//设置样式
            },