BKS--vue中的ref以及$refs的使用

vue官网指路:https://cn.vuejs.org/v2/api/#ref

访问子组件实例或子元素:

https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0



vue中更新dom是异步的。

ref本质就是解决在JavaScript里直接访问子组件或子元素(dom元素)。

父子组件通信的方式:1.prop 2.$emit 3.ref

只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册。

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

ref本身是作为渲染结果被创建的,不应该在初始渲染时访问。

$refs也不是响应式的,不能在模板中做数据绑定。

console.log(this.$refs.input1)

console.log(document.getElementById('input1'))

这两种方法获得的都是Dom节点,而$refs相对document.getElementById的方法,会减少获取dom节点的消耗。


你可能感兴趣的:(BKS--vue中的ref以及$refs的使用)