vue中ref的用法总结

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

1.基本用法，本页面获取dom元素

<div ref="testDom">11111</div>
<button @click="getTest">获取test节点</button>

getTest() {
   console.log(this.$refs.testDom)
},

2.调用子组件中的data

子组件
    <el-button @click='clickChildButton'>子组件的按钮</el-button>

    data() {
        return {
            msg:"我之前很瘦的"
        }
    },

父组件
    <el-button @click='clickButton'>按钮{{isShow}}</el-button>

     clickButton() {
        console.log(this.$refs.myChild.msg);  //我之前很瘦的
     }

3.调用子组件中的方法

子组件
        clickChildButton() {
            console.log('子组件的按钮被点击');
            
        }
父组件
    clickButton() {
        this.$refs.myChild.clickChildButton()  //子组件的按钮被点击
        
      },