007、ref属性使用

是什么

ref被用来给元素或者组件注册引用信息。

什么时间注册

本身作为渲染结果创建的，初始渲染时不存在，实例挂载之后才会被创建。

在哪里获取

引用信息将会注册在父组件的$refs对象上。但是和v-for一起引用时，则引用信息会是一个包含DOM节点或者组件实例的数组。

指向哪里

1、若在普通的DOM上使用，引用的指向就是DOM元素；
2、若在子组件上，引用的就指向组件实例。

能做些什么

在vue中直接操作DOM

怎么用

一、模板中使用
1、组件
HTML部分：

<template>
    <div>{{msg1}}</div> 
    <div>{{msg2}}</div>
</template>

JS部分：

export default {
    name: 'componentFirst',//组件名称
    data () {
        return {
            msg1: 'msg1',
            msg2: 'msg2'
        }
    }
}

2、页面中引用
HTML：

<componentFirst ref="refName"></componentFirst>

JS：

import componentFirst from './components/componentFirst';
export default {
    data () {},
    components: {
        componentFirst
    },// 注册局部组件
    // 实例创建之后，但是还没有被挂载
    created () {
        let _this = this;
        _this.$nextTick( () => {
            _this.$refs.refName.msg1 = '修改后的msg1';
            // _this.$refs.组件中ref的值.该组件中用到的data()值
        })
        /*
        _this.$nextTick(() => {});
        此方法为了将回调延迟到下次DOM更新之后执行。
        在修改了数据之后会立即使用，可以在mounted、updated中使用。此时，相当于所有的view都会被重新渲染。
        */
    },
    // 可以单独写在mounted中
    mounted () {
        this.$refs.refName.msg = '在mounted中的msg';
    }
}

二、DOM中使用
1、HTML

<div ref="domRef" v-for="(item,index) in arr" @click="fn(index)">{{itme}}</div>

2、JS

export default {
    data () {
        return {
            arr: [1,2,3]
        }
    },
    methods: {
        fn (index) {
            this.$refs.domRef.innerText = index;
        }
    }
}