组合API-ref属性

在vue2.x中，可以通过给元素添加ref='xxx'属性，然后在代码中通过this.$refs.xxx获取到对应的元素

然而在vue3中时没有$refs这个东西的，因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取。

目标：掌握使用ref属性绑定DOM或组件

获取DOM或者组件实例可以使用ref属性，写法和vue2.0需要区分开

• 基于Vue2的方式操作ref-----数组场景

<ul><li v-for="(item, index) in list" ref="fruits" :key="index">{{ item }}</li><!-- <my-com :key='index' v-for='index in 8' ref='info'></my-com> -->
</ul>
<button @click="handleClick">点击</button>

methods: {handleClick () {const fruits = this.$refs.fruitsconsole.log(fruits[1].innerHTML)}
}
// 批量绑定同名的ref （主要就是v-for场景中使用 ref）,此时通过[this.$refs.名称]访问的值应该是一个数组，数组中包含每一个DOM元素
// ref绑定组件的用法与之类似

总结：

1. Vue2中可以通过ref直接操作单个DOM和组件 this.$refs.info.innerHTML
2. Vue2中可以批量通过ref操作DOM和组件 this.$refs.fruit[0].innerHTML

• ref操作单个DOM元素----Vue3的规则

<template><div><div>ref操作DOM和组件</div><hr><!-- 3、模板中绑定上述返回的数据 --><div ref='info'>hello</div><!-- <my-com ref='info'>hello</my-com> --><ul><li ref='fruit' v-for='item in fruits' :key='item.id'>{{item.name}}</li></ul><button @click='handleClick'>点击</button></div>
</template>

<script>
import { ref } from 'vue'

export default {
name: 'App',
setup () {
// this.$refs.info.innerHTML//this.$refs.fruit 的值应该是一个数组，数组中放的DOM元素
// this.$refs.fruit[0].innerHTML —> apple
// -----------------------------------------
// Vue3中通过ref操作DOM
// 1、定义一个响应式变量
const info = ref(null)

const fruits = ref([{id: 1,name: 'apple'
}, {id: 2,name: 'orange'
}])const handleClick = () => {// 4、此时可以通过info变量操作DOMconsole.log(info.value.innerHTML)
}// 2、把变量返回给模板使用
return { fruits, info, handleClick }

}
}
</script>

<style lang="less">
</style>

总结：操作单个DOM或者组件的流程

1. 定义一个响应式变量
2. 把变量返回给模板使用
3. 模板中绑定上述返回的数据
4. 可以通过info变量操作DOM或者组件实例

• 获取v-for遍历的DOM或者组件

<template><div><div>ref操作DOM和组件</div><hr><!-- 3、模板中绑定上述返回的数据 --><div ref='info'>hello</div><!-- <my-com ref='info'>hello</my-com> --><ul><li :ref='setFruits' v-for='item in fruits' :key='item.id'>{{item.name}}</li></ul><button @click='handleClick'>点击</button></div>
</template>

<script>
import { ref } from ‘vue’

export default {
name: ‘App’,
setup () {
// this.$refs.info.innerHTML</span><spanclass="tokencomment">//this.$refs.fruit 的值应该是一个数组，数组中放的DOM元素
// this.$refs.fruit[0].innerHTML —> apple
// -----------------------------------------
// Vue3中通过ref操作DOM
// 1、定义一个响应式变量
const info = ref(null)

<span class="token keyword">const</span> fruits <span class="token operator">&#61;</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;apple&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;orange&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;pineapple&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token comment">// 定义操作DOM的函数</span>
<span class="token keyword">const</span> arr <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> <span class="token function-variable function">setFruits</span> <span class="token operator">&#61;</span> <span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span><span class="token comment">// 参数el表示单个DOM元素</span>arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">&#61;</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span><span class="token comment">// 4、此时可以通过info变量操作DOM</span><span class="token comment">// console.log(info.value.innerHTML)</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token comment">// 2、把变量返回给模板使用</span>
<span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span> fruits<span class="token punctuation">,</span> info<span class="token punctuation">,</span> handleClick<span class="token punctuation">,</span> setFruits <span class="token punctuation">}</span>

}
}
</script>

<style lang=“less”>
</style>

总结：ref批量操作元素的流程

1. 定义一个函数
2. 把该函数绑定到ref上（必须动态绑定）
3. 在函数中可以通过参数得到单个元素，这个元素一般可以放到数组中
4. 通过上述数组即可操作批量的元素

Vue3超详细的 ref()用法，看这一篇就够了

热门推荐

EchoLiner的博客

04-30 7万+

ref()接受一个内部值，返回一个响应式的可更改的 ref 对象，此对象只有一个指向其内部值的 属性.value。 ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象。

vue3 ref函数用法

wuxing164的博客

11-19 4万+

1.在setup函数 中，可以 使用 ref函数，用于创建一个响应式数据，当数据发生改变时， Vue会自动更新UI

<template>
<div>
<h1>{{mycount}}</h1>
<button @click="changeMyCount">changeMyCount</button>
</div>
</template>

<script>
i…

Vue3入门到精通-- ref以及 ref相关函数，做了6年前端开发

最新发布

2401_83740189的博客

03-21 588

console.log(“obj”, obj.name);console.log(“ ref”, stateTo ref.value);// obj ls// ref lsto ref----------{{ stateTo ref }}let obj = { name: “syl” };let stateTo ref = to Ref(obj, “name”);stateTo ref.value = “zs”;console.log(“obj”, obj.name);console.log(“ ref”, stateTo

	</dl>

vue3 中 ref的 使用

CYL_2021的博客

09-18 6719

ref的 使用

VUE3 中的 ref函数和reactive函数

l1830473688的博客

07-17 6234

VUE3.0 中的 ref 函数，reactive 函数

ref 有三种用法：
1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

普通的DOM元素上使用

<input type=textref=TEXT/ >
<button @click=add>

vue3 ref 属性

greed

09-10 3170

vue3 ref 属性 操作单个DOM元素

操作单个DOM或者组件的流程

定义一个响应式变量
把变量返回给模板使用
模板中绑定上述返回的数据
可以通过info变量操作DOM或者组件实例

<template>
<div>
<div>ref操作DOM和组件</div>
<hr>
<!-- 3、模板中绑定上述返回的数据 -->
<div ref='info'>hello</div&g

vue3 中 ref的理解

weixin_47886687的博客

01-21 5万+

1.什么是 ref?

ref和reactive一样,也是用来实现响应式数据的方法
由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦
所以Vue3提供了ref方法实现简单值得监听

2.ref本质

ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive.

3.ref注意点

在vue中使用ref的值不用通过value获取
在js中使用ref的值必须通过value获取

…

Vue3 中 ref 属性详解

明天也要努力的博客

07-09 4万+

总结：在 Vue3 中没有 $ refs，因此 Vue3 中通过 ref 属性获取元素就不能按照 vue2 的 方式来获取。 Vue3 需要借助生命周期方法，因为在 setup 执行时，template 中的元素还没挂载到页面上，所以必须在 mounted 之后才能获取到元素。 总结： 先申明 ref 响应式数据，再返回给模版 使用，模板 中通过 ref 绑定数据； 总结： 先定义一个空数组，再定义一个函数获取元素，并把该函数绑定到 ref 上（必须动态绑定），最后在函数 中可以通过参数得到单个元素，这个元素一般可以放

vue3 中的 ref()

Sapling

11-07 9198

只有当嵌套在一个深层响应式对象内时，才会发生 ref 解包。如果将一个对象赋值给 ref，则这个对象会通过reactive()转为具有深层次的响应式对象。如果将一个新的 ref 赋值给另一个对象具有 ref 属性的 ，那么它会替换掉旧的 ref。接受一个值，返回一个响应式的，可以修改的 ref对象，这个对象只有一个。 属性进行修改，修改后的值也是响应式的，并且修改后会触发相关的副作用。一个 ref对象嵌套在一个响应式对象 中， 属性访问时会自动解包。对于 属性值是 ref对象的对象，解构后也具有响应式。

This is title
This is content

用Vue实例中的自带的$refs属性获取元素 用预先定义好的引用名来获取 即在页面中的ref属性定义的值

var vm=new <em>Vue</em>({el:&#39;#app&#39;,data:{},methods:{getElement(){console.log(this.$<em>ref</em>s.myti</div></a></div>
</div>

<!-- vm.$<em>ref</em>s.p将会是DOM结点 -->
hello
<!-- vm.$<em>ref</em>s.child将会是子组件实例 -->

如果在普通的 DOM 元素上使用，引用指向的就是DOM 元素如果用在子组件上，引用就指向组件实例
深入理解$<em>ref</em>s某组件的$refs含有该组件的所有ref，看下面的例子

hello
<child-component ref

在模板中，可以使用 <em>ref</em> 指令来创建一个 <em>ref</em> 对象，并将其绑定到一个元素或组件上。例如：

&lt;template&gt;&lt;div&gt;&lt;input type=&quot;text&quot; <em>ref</em>=&quot;input<em>Ref</em>&quot; /&gt;&lt;button @click=&quot;handleClick&quot;&gt;Click Me&lt;/button&gt;&lt;/div&gt;
&lt;/template&gt;&lt;script&gt;
import { <em>ref</em> } from &#39;<em>vue</em>&#39;;export default {setup() {const input<em>Ref</em> = <em>ref</em>(null);function handleClick() {input<em>Ref</em>.value.focus();}return {input<em>Ref</em>,handleClick,};},
};
&lt;/script&gt;

在这个例子中，我们使用 <em>ref</em> 指令将 input 元素绑定到 input<em>Ref</em> 变量上。在 setup 函数中，我们使用 <em>ref</em> 函数创建了一个 <em>ref</em> 对象，并将其初始值设置为 null。然后，我们在 handleClick 函数中访问了 input<em>Ref</em>.value，并调用了 focus 方法，以便将焦点设置到 input 元素上。

需要注意的是，在 Vue 3 中，<em>ref</em> 不再返回一个对象，而是返回一个包含 value 属性的普通 JavaScript 对象。因此，在访问 <em>ref</em> 对象的属性和方法时，需要使用 .value 来访问其值。

另外，在 Vue 3 中，<em>ref</em> 还可以用于引用组件，例如：

&lt;template&gt;&lt;div&gt;&lt;MyComponent <em>ref</em>=&quot;myComponent<em>Ref</em>&quot; /&gt;&lt;button @click=&quot;handleClick&quot;&gt;Click Me&lt;/button&gt;&lt;/div&gt;
&lt;/template&gt;&lt;script&gt;
import { <em>ref</em> } from &#39;<em>vue</em>&#39;;
import MyComponent from &#39;./MyComponent.<em>vue</em>&#39;;export default {components: {MyComponent,},setup() {const myComponent<em>Ref</em> = <em>ref</em>(null);function handleClick() {myComponent<em>Ref</em>.value.someMethod();}return {myComponent<em>Ref</em>,handleClick,};},
};
&lt;/script&gt;

在这个例子中，我们使用 <em>ref</em> 指令将 MyComponent 组件绑定到 myComponent<em>Ref</em> 变量上。在 setup 函数中，我们使用 <em>ref</em> 函数创建了一个 <em>ref</em> 对象，并将其初始值设置为 null。然后，我们在 handleClick 函数中访问了 myComponent<em>Ref</em>.value，并调用了 someMethod 方法，以便调用 MyComponent 组件的某个方法。