vue3 当中父子组件如何传值

在Vue3中，父子组件之间的数据传递可以通过props和emit来实现。

1. 父组件通过props向子组件传递数据：

父组件中：

<template>
  <ChildComponent :message="parentMessage" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: '这是来自父组件的数据',
    };
  },
};
</script>

子组件中：

<template>
  <div>{{ message }}</div>
</template>

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

2. 子组件通过emit向父组件传递数据：

子组件中：

<template>
  <button @click="handleClick">点击向父组件传递数据</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('send-message', '这是来自子组件的数据');
    },
  },
};
</script>

父组件中：

<template>
  <ChildComponent @send-message="handleReceiveMessage" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleReceiveMessage(message) {
      console.log(message); // 这是来自子组件的数据
    },
  },
};
</script>

以上就是Vue3中父子组件如何传值的两种方式。