vue中ref的使用

众所周知，原生js获取DOM元素是很麻烦的，需要用如：document.getElementById这么长的API来获取，于是jQuery应运而生，$("#id")的使用使我们的操作变得简便起来。但是jQuery仅仅是库（插件），不能够用来搭建框架。于是vue可以帮我们解决这个问题，vue也有自带的获取DOM的方法，那就是ref。它不仅可以获取DOM元素还可以获取组件。

一、获取DOM，操作DOM

1、给dom节点记上ref属性，可以理解为给dom节点起了个名字。

2、加上ref之后，在$refs属性中多了这个元素的引用。

3、通过vue实例的$refs属性拿到这个dom元素。

<div id="box" ref="refdiv"> haha</div>
<div id="box2" ref="refdiv2"> haha</div>
//这些元素最早可以在mounted声明函数中获得
mounted(){this.$refs.refdiv.style.color = 'red'//修改box的字体颜色
}

二、获取组件，拿到组件中的变量和方法

1、给组件记上ref属性，可以理解为给组件起了个名字。

2、加上ref之后，在$refs属性中多了这个组件的引用。

3、通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。

<son id="son2" ref="son2"></son>
<template id="son"><div>son<button @click="log1">按钮</button></div></template>Vue.component("son",{template:"#son",data(){return{msg:"hello"}},methods:{log1(){console.log(1);}}})
data: {sonmsg:""},mounted() {this.sonmsg = this.$refs.son2.msg//调用组件中的方法this.$refs.son2.log1()},

也可以通过给变量赋值的方法，展示该组件中的内容。

vue中ref的使用相关推荐

vue中ref 的使用
在vue 中 ref 和 refs 的使用: <ul ref="ul" class="his-list listItem" style="pa ...
【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...
Vue中 $ref 的用法
ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例注意:只要想 ...
Vue中ref的作用？？？
为什么出现ref 在没有学习Vue之前,我们实现直接操作页面上的DOM元素都是通过JS/jQuery,因为jQuery对DOM元素的操作非常的方便但是学习了vue之后就比jquery更方便所以它 ...
Vue中ref和$refs的介绍及使用
在JavaScript中需要通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值.在Vue中,我们不用获取dom节点,元素绑定 ...
Vue中ref的用法：获取DOM 父获取子数据父使用子方法子调用父方法
获取本页面dom元素 <template><div id="app"><div ref="testDom">11111< ...
VUE中 ref $refs 使用详解，扩展到$parent 、$children 的使用
$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息,引用信息将会注册在父组件的$refs对象上,在js中使用$refs来指向DOM元素或组件实例: 应用一:在DOM元素上使用$ ...
Vue中ref和$refs的介绍与使用
之前没怎么注意 ref 的使用.后来一次结合 for 循环使用.才发现 ref 的使用细节满满.于是就总结了一下. ref作用用来给元素或者子组件注册引用信息.引用信息将会注册给父组件的$refs对 ...
vue中ref、reactive和 toRefs toRef
ref和reactive都是响应式的引用,其原理是通过 proxy 对数据进行封装,当数据变化时,触发模版等内容的更新, ref 处理基础类型的数据(string,number..),reactive ...

vue中ref的使用

vue中ref的使用相关推荐

最新文章

热门文章