Vue3中的常见组件通信之`$refs`、`$parent`

在Vue3中，$refs和$parent同样可以用来进行组件之间的通信，但是它们并不是推荐的通信方式，因为它们破坏了Vue的响应式原则。

1. $refs：

$refs是一个对象，持有注册过 ref 属性的所有 DOM 元素和组件的引用。在模板中，使用 ref 特性为元素注册引用。

<template>
  <ChildComponent ref="child"/>
</template>
 
<script>
export default {
  mounted() {
    console.log(this.$refs.child);  // 访问子组件的实例
  }
}
</script>

2. $parent：

$parent属性可以用来从一个子组件访问父组件的实例。

<template>
  <button @click="callParentMethod">Call Parent Method</button>
</template>
 
<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod();  // 调用父组件的方法
    }
  }
}
</script>

为了改善通信方式，推荐使用以下方法：

• Props / Events：父组件通过 props 给子组件下发数据，通过事件给父组件发送消息。
• Provide / Inject：在父组件中 provide 数据，在子组件中 inject 数据。
• Vuex / Vue.observable(): 使用全局状态管理。
• Composition API 中的 ref 和 reactive 来管理状态。

例如，使用 Props / Events 通信方式：

父组件：

<template>
  <ChildComponent :childData="parentData" @child-event="parentMethod"/>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'some data'
    };
  },
  methods: {
    parentMethod(payload) {
      console.log(payload);
    }
  }
}
</script>

子组件：

<template>
  <button @click="sendToParent">Send to Parent</button>
</template>
 
<script>
export default {
  props: {
    childData: String
  },
  methods: {
    sendToParent() {
      this.$emit('child-event', 'data from child');
    }
  }
}
</script>