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

最新推荐文章于 2024-05-26 03:38:41 发布

Ajiia

最新推荐文章于 2024-05-26 03:38:41 发布

阅读量1.6k

点赞数 4

文章标签： vue.js

本文链接：https://blog.csdn.net/czj1049561601/article/details/114274081

版权

除了自定义属性外，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 和$ 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>

Ajiia

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
7
评论
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元素，如果有多
复制链接

扫一扫