Vue中的$ref和$refs属性介绍与使用-蒲公英云

Vue中的$ref和$refs属性介绍与使用

除了自定义属性外，Vue实例还暴露一些有用的实例属性和方法，他们都有前缀$，以便和用户定义的属性和方法分开

在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现
常用的属性有：
    1：vm.$el       //获取vue实例关联的Dom元素
    2: vm.$data     //获取vue实例的data选项
    3：vm.$options    //获取vue实例的自定义属性
    4：vm.$refs        //获取vue实例中所有含有ref属性的dom元素，如果有多个，只返回最后一个。
    5: vm.$ref         // ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例
         ref加载普通元素上，this.$refs.  获取到的就是dom元素
         ref记载在子组件上，this.$refs.  获取到的就是组件实例，可使用组件的所有方法。

详细的教程请见下文链接：

Vue教程（$ r e f 和 ref和 ref和refs的使用）https://cloud.tencent.com/developer/article/1479575

<!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>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="获取h3的值" @click="getElement()">
        <h3 id="myh3" ref="myh3" >我是一个h3</h3>
        <hr>
        <login ref='mylogin'></login>
    </div>
    <script>
        var login = { 
            template: "<h3>我是login子组件</h3>",
            data(){ 
                return { 
                    msg: "ok"
                }
            },
            methods:{ 
                show(){ 
                    console.log("show方法执行了...")
                }
            }
        }
        var vm = new Vue({ 
            el: "#app",
            data: { },
            methods: { 
                getElement(){ 
                    // 通过 getElementById 方式获取 DOM 对象
                    // console.log(document.getElementById("myh3").innerHTML)
                    // console.log(this.$refs.myh3.innerHTML)
                    console.log(this.$refs.mylogin.msg)
                    this.$refs.mylogin.show()
                }
            },
            components:{ 
                login
            }
        })
    </script>
</body>
</html>