组件间通信（有关ref节点）第六节

renh其实在vue里面，ref是给节点打标识用的，可以通过实例上的$refs里面可以访问得到，在vue里面如果要实现传值也可以用ref，包括之前的父传子，也可以通过attars里面获取，还有Childen，$parent等等，在vue中，ref也是比较常用的一种方法，在vue2和vue3，因为this的改变，所以它们的写法也是不一致的，

在vue2里面，如果在A组件打标识，进行访问的话，可以访问到A组件里面的方法和data里面定义的属性，这是A组件

<template>
  <div>
      <h1>这是A组件</h1>
  </div>
</template>

<script>
export default {
    data() {
        let msg='refDOm标识'
        return {
            msg
        }
    },
  methods: {
      comAmethod(){
          console.log("组件A里面定义的方法");
      }
  },
}
</script>

然后我们在父组件里面通过ref来使用

<template>
<div>
  <h1>App</h1>
  <CompontsA ref="ComA" />
  <CompontsB/>
</div>
  
</template>

<script>
import CompontsA from './components/CompontsA.vue'
import CompontsB from './components/CompontsB.vue'
export default {
  components:{CompontsA,CompontsB},
  data(){
    return{
      appName:'App组件'
    }
  },
  mounted(){
    console.log(this.$refs.ComA.msg);
    this.Aclick()
  },
  methods: {
    Aclick(){
      this.$refs.ComA.comAmethod()
    }
  },

}
</script>

 再看看控制台输出

 我们在看看vue3写法，ref不仅要定义出来，在打标识的组件里面如果想让父组件访问得到，就必须借助defineExpose（）这个函数暴露出去

<template>
  <div>
      <h1>这是A组件</h1>
  </div>
</template>

<script setup>
import { ref,getCurrentInstance,onMounted } from 'vue' 
const {proxy}=getCurrentInstance()
  let msg=ref('refDOm标识')
 function comAmethod(){
          console.log("组件A里面定义的方法");
      }
defineExpose({
    msg,
    comAmethod
})
</script>

然后访问的话

<template>
  <div>
    <h1>App</h1>
    <CompontsA ref="ComA"/>
    <CompontsB/>
  </div>
</template>

<script setup>
import CompontsB from './Hightpom.vue'
import CompontsA from './directives.vue'
import { ref,getCurrentInstance,onMounted } from 'vue' 
let ComA=ref(null)
const {proxy}=getCurrentInstance()
onMounted(()=>{
  proxy.$refs.ComA.comAmethod()
  console.log(proxy.$refs.ComA.msg);
})
</script>

需要用到的都需要defineExpose暴露出去，

然后在控制台结果是