Vue.js中$refs{}获取DOM元素

以你之姓@ 2022-12-22 10:00 361阅读 0赞

如果我们想获取DOM元素，一般使用js中的`document.querySelector`来获取这个dom节点，然后在获取元素的值，现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs\{\}

# $refs\{\}----获取标签元素 #

说明：一个对象，持有注册过 `ref attribute` 的所有 DOM 元素和组件实例

作用：减少DOM操作

用法：

## 原生方法 ##

此例是利用原生js`document.getElementById()`获取元素

<div id="app">
        <input type="button" value="获取元素" @click='btn'>
        <h3 id="myh3">哈哈, 今天天气不错</h3>
    </div>
    
    <script> var vm= new Vue({ el:'#app', data:{ }, methods: { btn(){ console.log(document.getElementById('myh3').innerText); } } }) console.log(vm); </script>

效果如下：  
![在这里插入图片描述][20201119194004270.png_pic_center]

我们将`vm`实例输出，查看这个对象  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

## vm.$refs方法获取 ##

1.  给元素定义`ref="`,输出vm实例

<h3 id="myh3" ref="myh3">哈哈, 今天天气不错</h3>

![在这里插入图片描述][20201119194454584.png_pic_center]

1.  在实例的方法中输出，

获取元素方法如下：

console.log(this.$refs.myh3);

获取内容方法如下：

console.log(this.$refs.myh3.innertext);
    //或者
    console.log(this.$refs.myh3.innerHtml);

![在这里插入图片描述][202011191948373.png_pic_center]

# $refs\{\}----获取Vue组件 #

查看vm实例：

<div id="app">
        <input type="button" value="获取元素" @click='btn'>
        <login ref='mylogin'></login>
    </div>
    
    <script> var login={ template:'<h1>登录组件</h1>', data() { return { msg:'son msg' } }, methods: { show(){ console.log('调用了子组件的方法'); } }, } var vm= new Vue({ el:'#app', data:{ }, methods: { btn(){ } }, components:{ login } }) console.log(vm); </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]  
**利用$refs获取子组件的方法：**

console.log(this.$refs.mylogin);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]  
**利用$refs获取子组件内容的方法：**

this.$refs.mylogin.show();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 3]  
**利用$refs获取子组件中的data：**

console.log(this.$refs.mylogin.msg);

![在这里插入图片描述][2020111920014331.png_pic_center]

[20201119194004270.png_pic_center]: /images/20221120/0a5fcafeeec64369a6b28868b91bd4bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/949d8b2068894d65b7aecb10ba8a1b0c.png
[20201119194454584.png_pic_center]: /images/20221120/4038533be0d344cea4b9933245068d69.png
[202011191948373.png_pic_center]: /images/20221120/c239cd307f6344acafe6ce0a079db609.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/3f728d8d91b64d339ea0cd04941569e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/ae4f1985ca454717827cc50b180e6c92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/67d9dad1f9134a7bb87178c466715eb2.png
[2020111920014331.png_pic_center]: /images/20221120/db0044c6ef2045e1a09d25199aebbc14.png