Vue中 $refs 获取DOM元素和组件的引用

说明： vm.$refs 是一个对象，拥有已注册过 ref 的所有元素(或者子组件)使用：在HTML元素中，添加ref属性，然后在JS中通过vm.$refs.属性来获取注意：如果获取的是一个子组件，通过 ref 就能获取到子组件中的 data 和 methods添加 ref 属性<div id='app'><input type="butto

sxs7970

3521人浏览 · 2019-03-13 11:57:58

sxs7970 · 2019-03-13 11:57:58 发布

说明： vm.$refs 是一个对象，拥有已注册过 ref 的所有元素(或者子组件)
使用： 在HTML元素中，添加ref属性，然后在JS中通过vm.$refs.属性来获取
注意： 如果获取的是一个子组件，通过 ref 就能获取到子组件中的 data 和 methods

添加 ref 属性

  <div id='app'>
        <input type="button" value="获取元素" @click="getElement" ref="mybtn">
        <h3 ref="myh3">哈哈哈哈哈</h3>
        <hr>
        <login ref="mylogin"></login>
    </div>

在控制台输出，vm实例身上的属性，如图：
在这里插入图片描述
这里就是所有注册过 ref 的元素。

调用子组件的引用

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>ref获取DOM元素和组件的引用</title>
    <script src='../lib/vue.js'></script>
</head>

<body>
    <div id='app'>
        <input type="button" value="获取元素" @click="getElement" ref="mybtn">
        <h3 ref="myh3">哈哈哈哈哈</h3>
        <hr>
        <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: {
                getElement() {
                    // ref 是英文单词 【reference】 值类型 和 引用类型 (referenceError 引用错误)
                    
                    console.log(this.$refs.myh3.innerText); //获取h3的文本内容
                    console.log(this.$refs.mylogin.msg); //调用子组件的数据
                    this.$refs.mylogin.show(); //调用子组件的方法
                }
            },
            components: {
                login: login
            }
        })
    </script>
</body>

</html>

点击按钮，所得结果：
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^