VUE(七)： ref属性，nextTick与对象深度改变

一、ref属性

ref 用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。

• 如果在普通的DOM元素上使用，引用信息就是DOM元素
• 如果用在子组件上，引用信息就是组件实例
• 想要在Vue中直接操作DOM元素，就必须用ref属性进行注册
• $ref不是响应式的，因此不要在此对象中试图去改变数据
• 当v-for去遍历元素或者组件时，引用信息则是一个数组

1.ref作用在组件上

html:

<div id="ref-outside-component" v-on:click="consoleRef">
    <component-father ref="outsideComponentRef">
    </component-father>
    <p>ref在外面的组件上</p>
</div>

js:

var refoutsidecomponentTem={
   
    template:"<div class='childComp'><h5>我是子组件</h5></div>"
};
var  refoutsidecomponent=new Vue({
   
    el:"#ref-outside-component",
    components:{
   
        "component-father":refoutsidecomponentTem
    },
    methods:{
   
        consoleRef:function () {
   
            console.log(this); // #ref-outside-component     vue实例
            // 通过$refs对象获取到此组件的引用
            console.log(this.$refs.outsideComponentRef);  // 输出： 此组件实例对象
        }
    }
});

2.ref作用在DOM元素上

html:

<!--ref在外面的元素上-->
<div id="ref-outside-dom" v-on:click="consoleRef" >
   <p  ref="outsideDomRef">ref在外面的元素上</p>