专业的编程技术博客社区

网站首页 > 博客文章 正文

Vue中ref和$ref的使用（vue中ref是什么）

baijin 2024-10-04 13:24:11 博客文章 5 ℃ 0 评论

???在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和

不能识别此Latex公式:
refs这两个来实现，本文我们就来详细的介绍下这个内容
ref
?? ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的

refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。

$refs


不能识别此Latex公式:
refs
 是一个对象，持有已注册过 ref 的所有的子组件。
具体演示
1.基础代码
??先来准备案例基础代码，如下
<!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">

    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })
    </script>
</body>
</html>

2.普通DOM
2.1 普通方式
??我们先通过 getElementById 方法来获取
在这里插入图片描述效果
在这里插入图片描述2.2 ref使用
??接下来我们通过 ref 属性来试试。
在这里插入图片描述然后查看 vm 实例对象
在这里插入图片描述通过上面的演示我们发现 在vm实例上有一个

refs属性，而且该属性就有我们通过ref注册的DOM对象，于是我们可以这样获取DOM对象

在这里插入图片描述


效果

在这里插入图片描述

3.组件

?? ref 也可以作用在组件中，我们来看下效果

3.1 添加组件

??先来添加一个自定义的组件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


效果

在这里插入图片描述

3.2 ref 使用

??在 子组件中使用 ref属性，会将子组件添加到父组件的

在这里插入图片描述


查看vm对象

在这里插入图片描述

通过 vm 实例查看 发现 refs对象中，如下

通过vm实例查看发现refs中绑定的有 我们的login组件，而且还看到了对应的 组件中的 msg属性和 show方法，那这样我们可以调用了，如下

在这里插入图片描述

在这里插入图片描述

完整代码

<!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>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表