32 ref属性
被用来给元素或者子组件注册引用信息(id的替代者)
通过案例来演示_ref属性
32.1 编写案例
如图:有一个按钮,点击按钮可以输出dom元素
备注:虽然vue不用我们亲自操作dom,但是有的特殊的情况下就要亲自操作dom
页面就是这个样子的
32.2 传统操作dom
如果使用传统的方式,给属性一个id,再使用document,getElementById是可以操作的,但是这些代码,本身就不应该出现在vue中,这里我应该给h1id属性的,但是给错了,问题不大
虽然可以实现,但是不推荐
32.3 vue的ref属性
原生的html喜欢给元素id标识,在vue中有类似的办法,不过不是使用id而是ref
这里面我给h1标签一个ref属性,然后单击的时候输出vc,可以看到里面有一个$refs属性,里面就死定义的ref属性
既然已经找到了refs,那么就可以使用$refs编写了
也是可以正常拿到dom元素的
32.4 细节问题
组件标签ref属性
上面我是给h1标签加了ref属性,h1属性html标签,但是如果想给school标签加ref呢?school可是组件标签
我们测试下
发现如果给组件标签加了ref,得到的就是这个组件的vc实例对象
组件标签id属性
但是如果给组件标签id标识,并且通过dom获取id,获取到的就不是vc实例对象了
观察发现得到的是实例的根容器
32.5 ref属性总结
1 被用来给元素或者子组件注册引用信息(id的替代者)
2 应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc)
3 使用方式:
打标识:<h1 ref="xxx">....</h1>或<school ref=""></school>
获取:this.$refs.xxx