vue3中父子组件通信方法案例

在 Vue3 中，父子组件通信可以使用 props 和 emit 来实现。

父组件可以通过 props 把数据传递给子组件：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

子组件可以通过 props 接收父组件传递的数据：

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

如果子组件需要向父组件通信，可以使用 emit 来触发一个自定义事件：

<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-from-child', 'Hello from child')
    }
  }
}
</script>

父组件可以通过 v-on 绑定自定义事件来接收子组件传递的数据：

<!-- 父组件 -->
<template>
  <div>
    <child-component @message-from-child="handleMessageFromChild" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessageFromChild(message) {
      console.log(message)
    }
  }
}
</script>