Vue教程13(ref 和 $refs)

最新推荐文章于 2024-05-06 21:59:32 发布

yangsen159

最新推荐文章于 2024-05-06 21:59:32 发布

阅读量295

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/yangsen159/article/details/105513637

版权

vue 专栏收录该内容

18 篇文章

订阅专栏

ref和$refs的使用

ref

ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。

$refs

$refs 是一个对象，持有已注册过 ref 的所有的子组件。

ref使用

我们通过 ref 属性获取值

<h3 id="myh3" ref="myh3" >我是一个h3</h3>

通过上面的演示我们发现在vm实例上有一个 $refs属性，而且该属性就有我们通过ref注册的DOM对象，于是我们可以这样获取DOM对象

console.log(this.$refs.myh3.innerHTML)

组件–> ref 使用

在子组件中使用 ref属性，会将子组件添加到父组件的$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>