探索Vue中的$refs

探索Vue中的￥refs

1.在页面中获取含有ref属性的Dom元素，粗暴记忆：如果你想在vue中进行dom操作，就使用ref属性，然后通过$refs来获取

例如：

<template>
	<div>
        <div @click="change" id="demo">
           我是案例 
    	</div>
    </div>
	<script>
    	export default{
            methods:{
                change(){
                    let demo = document.getElementById("demo")
                    console.log(demo)
                }
            }
        }
    </script>
</template>

<template>
	<div>
        <div @click="change" ref="demo">
           我是案例 
    	</div>
    </div>
	<script>
    	export default{
            methods:{
                change(){
                    console.log(this.$refs.demo)
                }
            }
        }
    </script>
</template>

这两个打印出来的divDom元素，你会看到这两个毫无差异，其实作者在设计框架的过程中，其目的就是为了在vue中减少使用dom的直接操作。

2.获取组件实例的属性或者方法，但并不改变其数据

例如：我现在有两个组件，A组件与B组件，我点击B组件中的按钮，我想获取到A组件中的数据怎么办呢，或许你会想到之前所说的父传子，子传父，又或者EventBus,这些方法都不错，但使用ref可以快速的获取到A组件中的数据

组件A

<template>
    <div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            demo: "我是来自组件A"
        }
    },
}
</script>

<style lang="scss" scoped>

</style>

组件B

<template>
    <div>
        <button @click="btn">按钮</button>
        <com-a ref="demo"/>
    </div>
</template>

<script>
import ComA from './ComA.vue'
    export default {
        components: { ComA },
       methods: {
           btn() {
               console.log(this.$refs.demo.demo)
           }
       },
    }
</script>

<style lang="scss" scoped>

</style>

注意在使用ref的实际，组件渲染完成之后才可以生效，如果你要在created的钩子函数中使用此时是打印不来的，必要要将您写的代码放入到this.$nexttick(()=>{})里才可以生效，nexttick用一句最简单的话来理解，更新dom渲染的实际