18、ref和$refs的使用

---

1、ref概念

在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。通俗的讲，ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例。

2、在元素中使用ref

举例：

<div id="app">
        <!-- 在p标签上加上ref特性 并赋予id-->
        <p ref="mp">这是p标签</p>
        <button type="button" @click="get">获取ref</button>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        new Vue({
            el:"#app",
            methods:{
                get(){
                    console.log(this.$refs);
 			      console.log(typeof(this.$refs));
                }
            }
        })
    </script>

当我们点击button时，我们看到输出的是{mp：p}对象，打开mp对象我们看到其中的内容（下图为内容的一部分）

我们该对象中有很多属性和属性值，当我们将get修改如下时：

 get(){
     console.log(this.$refs.mp);
 }

即在我们的this.$refs后面加上我们设置的ref值，打印的结果为：

ref用在普通的dom元素上使用，引用指向的是dom元素，通过$refs可以获取到该dom的属性集合，作用与js的选择器类似。
可以看到，在 元素标签上使用 ref，通过 this.$refs.ref 获取到这个引用的时候，获取到的是一个 DOM 元素，如果是在一个组件上使用 ref，通过 this.$refs.ref 获取到的是一个组件的引用。

3、在组件中使用ref

举例：

<div id="app">
        <son ref="eg"></son>
        <button @click="change">父组件中的btn</button>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var son = Vue.extend({
            template:`
                <div style="width:100px;height:100px;background-color:red;"></div>
            `,
        })
        new Vue({
            el:"#app",
            components:{
                "son":son,
            },
            methods:{
                change(){
                    console.log(this.$refs);
                    console.log(this.$refs.eg);
                }
            }
        })
    </script>

props和ref区别：
props着重传递数据，但是不能调用子组件里的属性和方法。
ref着重于引用，主要用于调用子组件中的属性和方法，不能传递数据，如果强行传递，会报错。而且ref用在dom元素上的时候，可以使用到选着器的作用。