Vue3 组件之间通讯

Vue3 中，组件之间的通讯可以使用以下几种方式：

1. Props 和 Emit

在父组件中通过向子组件传递属性（props），子组件可以接受到父组件的数据。而子组件可以通过触发事件（emit）向父组件发送消息。

父组件传递props：

<template>
  <child-component :message="message" @send-message="handleSendMessage"/>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'hello'
    }
  },
  methods: {
    handleSendMessage(msg) {
      console.log(msg)
    }
  }
}
</script>

子组件接受props并emit：

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
export default {
  props: {
    message: String
  },
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hello Parent')
    }
  }
}
</script>

2. Provide 和 Inject

在父组件中通过 provide 方法向子孙组件提供数据，子孙组件可以通过 inject 方法来注入数据。

父组件 provide：

<template>
  <div>
    <grand-child-component></grand-child-component>
  </div>
</template>
<script>
import GrandChildComponent from './GrandChildComponent.vue'
export default {
  components: {
    GrandChildComponent
  },
  provide() {
    return {
      message: 'hello'
    }
  }
}
</script>

子孙组件 inject：

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

3. $refs

父组件可以通过 `ref` 属性来获取子组件的引用，从而调用子组件的方法或直接操作子组件的属性。

父组件获取子组件引用：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="handleClick">Click Me</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      this.$refs.child.someMethod()
    }
  }
}
</script>

子组件中的一些方法：

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  },
  methods: {
    someMethod() {
      console.log('hello from child component')
    }
  }
}
</script>

以上是 Vue3 中组件之间通讯的三种方式，开发者可以根据实际情况选择使用。