vue.js中$refs怎么用

这篇文章给大家分享的是有关vue.js中$refs怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联公司专注于通辽企业网站建设,响应式网站设计,商城系统网站开发。通辽网站建设公司,为通辽等地区提供建站服务。全流程按需策划，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务

• 说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）

• 使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取

• 注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了。示例代码如下：

<-- 添加ref属性 -->
<div id="app">
	<input type="text" ref="input1"/>
    <button @click="add">添加</button>
</div>

// 获取注册过 ref 的所有组件或元素
<script>
    new Vue({
        el: "#app",
        methods:{
        add:function(){
            this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
            }
        }
    })
</script>

感谢各位的阅读！关于“vue.js中$refs怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

本文名称：vue.js中$refs怎么用
文章位置：https://www.cdcxhl.com/article0/jjogio.html

成都网站建设公司_创新互联，为您提供网站营销、定制开发、网站收录、微信公众号、云服务器、全网营销推广

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联