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

╰半夏微凉° 2022-11-04 11:05 274阅读 0赞

#### 除了自定义属性外，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][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>

[Vue_ r e f _ ref_ ref_refs_https_cloud.tencent.com_developer_article_1479575]: https://cloud.tencent.com/developer/article/1479575