Vue - 5.ref属性

369 阅读1分钟

在使用组件的时候,通常会对组件之间进行通信,有些时候需要在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