Vue：ref

一、若是用在html的dom上，则此方法与js原生方法document.querySelector('[ref=name]')类似，引用时：$refs(注意：这里有一个“s”)

<template>
    <div id="app">
        <input type="text" ref="inputValue">
        <button @click="threeClick">点击</button>
    </div>
</template>

<script>
export default {
    name: "App",
    methods: {
        threeClick(){
            this.$refs.inputValue.value = 3
        }
    }
};
</script>

上述例子中，点击后，框里会出现一个3

二、用于子组件时，类似于原生js的闭包，使父组件可以访问子组件的数据并加以操作

//子组件
<template>
    <div>
        <span>{{num}}</span>
    </div>
</template>

//父组件
<template>
    <div id="app">
        <son ref="sonNum"></son>
        <button @click="add">add</button>
    </div>
</template>

<script>
import son from "@/components/son"
export default {
    name: "App",
    components:{
        son
    },
    methods: {
        add(){
            this.$refs.sonNum.num += 3
        }
    }
};
</script>

上诉例子中，点击add按钮时，子组件内的num会加3