View: ref

First, if used in html the dom on this method and js native method document.querySelector ( '[ref = name] ') Similarly, when reference: $ refs (Note: there is a "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>

The above example, after clicking, there will be a box 3

Second, when a sub-assembly, similar to the native js closure of the parent may access the data and make the operation subassembly

//子组件
<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>

Examples of the appeal, when you click add button, num within the sub-components will add 3

Guess you like