相信前端开发或者后端开发都用过jquery,因为不是数据驱动,为了获取某些元素的value值,都操作过Dom元素。
$("#id").text('xxx') $("#id").value('xxx') //使用原生Dom document.getElementById("id") document.getElementsByClassName("className")//使用Jquery获取Dom元素值
都经历过被Dom操作支配的恐惧,现在很多框架也都帮我们完成了这部分操作,我们不用再去子元素、父元素,只负责数据逻辑即可,如Vue,但是如果我们在某些条件下,依然需要操作Dom时,怎么办呢?Vue提供了ref、$ref。本次,我们就详细讲讲这两个属性。1.refref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:
<pref="p">hellop> <child-componentref="child">child-component>
1)作用于html标签
<divclass="about"> <divref="userName">{{username}}div> <button@click="clickBtn">点击button> div> template> <script>exportdefault{ data(){return{username:"测试"}; },methods:{ clickBtn(){console.log(this.$refs.userName); } } };script><template>
点击按钮,我们可以拿到绑定的Dom2)作用于组件子组件
<div>{{msg}}div> template> <script>exportdefault{ data(){return{msg:'我是子组件' } },methods:{ changeMsg(){this.msg='变身' } } }script><template>
父组件
<div@click="parentMethod"> <childrenref="children">children> div> template> <script>importchildrenfrom'components/children.vue'exportdefault{components:{ children }, data(){return{} },methods:{ parentMethod(){//返回一个对象this.$refs.children//调用children的changeMsg方法this.$refs.children.changeMsg() } } }script><template>
这种方式我们可以通过$refs直接调用子组件方法2.$refs一个对象,持有注册过refattribute的所有 DOM 元素和组件实例。
<divclass="about"> <divref="userName">{{username}}div> <divref="age">{{age}}div> <button@click="clickBtn">点击button> div> template> <script>exportdefault{ data(){return{username:"测试",age:11 }; },methods:{ clickBtn(){console.log(this.$refs); } } };script><template>
可以看到是个对象,里边包含了我们的定义的两个,可以通过下面方式,获取Dom实例进行后续操作。
this.$refs.agethis.$refs.userName
$refs 只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问