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() //子组件的按钮被点击
},