9、Vue_特殊特性

ref

ref：被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。
简单来说，就是如果一个标签定义了个ref属性，那么就可以通过$refs获取到该属性的一些值。

• 例子：比如说使用ref和$refs来实现双向数据绑定
• PS.我们实现双向数据绑定时，并不会使用它们，而是使用v-model，ref是用来获取元素对象的一些信息的，这样更方便

<template>
    <div id="ref">
        <input type="text" ref="name" @keyup="getName">
        <p>{{name}}</p>
    </div>
</template>

<script>
    export default {
        name: "v-ref",
        data(){
            return{
               name : ''
            }
        },
        methods:{
            getName(){
                // console.log(this.$refs); // F12的Console会打印出{name: input}这么个对象
                // console.log(this.$refs.name.value) // 会打印出所输入的值
                // 把得到的值赋值给当前name，就可以实现双向数据绑定
                this.name = this.$refs.name.value
            }
        }
    }
</script>

<style scoped>

</style>

结果: ref