在使用组件的时候,通常会对组件之间进行通信,有些时候需要在js中直接访问组件或者dom中的元素,Vue就提供了ref属性,来对子组件或dom的标签赋予一个id来方便引用,之后就可以通过 this.$refs.id 来获取元素
- 如果给标签添加ref,获取的就是真实的DOM节点
- 如果给子组件添加ref,获取的是当前子组件对象
const App = {
data() {
return {
}
},
mounted() {
console.log(this.$refs.btn);
//加载页面自动获取焦点
console.log(this.$refs.input.focus());
},
template: `
<div>
<Test ref='test'></Test>
<input ref='input' type="text"/>
<button ref='btn'>提交</button>
</div>
`,
}
这个方法不要滥用,vue推崇的是数据驱动视图,只在一些特殊情况下才用到ref