前面两篇学习的是使用props实现数据父传子，以及使用$emit实现父组件响应响应子组件。
现在来看看ref与$refs
- ref如果绑定在dom节点上，拿到的就是 原生dom节点
- ref如果绑定在组件上，拿到的就是 组件对象，可以实现通信功能
绑定dom
App.vue
<template>
<div>
<button @click="handleConA" ref="ConAbutton">ConA</button>
</div>
</template>
<script>
export default {
methods:{
handleConA(){
console.log(this.$refs.ConAbutton)
this.$refs.ConAbutton.textContent = this.$refs.ConAbutton.textContent + 'A'
}
},
}
</script>将ref绑定dom节点上，通过点击ConA按钮可以看到控制台上输出了DOM信息，并且可以修改节点属性。每点击一次按钮，按钮的textContent就多一个A。
绑定组件
App.vue
<template>
<div>
<button @click="handleConA">ConA</button>
<ConA ref="conA"></ConA>
</div>
</template>
<script>
import ConA from './ConA.vue';
export default {
components: {
ConA,
},
methods:{
handleConA(){
this.$refs.conA.isShowA = !this.$refs.conA.isShowA
console.log(this.$refs.conA.isShowA)
}
},
}
</script>ConA.vue
<template>
<div>
{{ isShowA }}
<p v-show="isShowA">ConA</p>
</div>
</template>
<script>
export default {
data() {
return {
isShowA: true
}
}
}
</script>
将ref绑定在子组件ConA上，使用按钮点击事件，通过$refs修改子组件ConA的isShowA
