vue3父子组件之间的传值方式

在vue3中，可以使用props和emit来实现父子组件之间的通信。子组件可以使用emit发出一个事件，父组件监听这个事件，并将数据传递给另一个子组件。

下面的简单例子中，ChildA组件有一个按钮，当按钮被点击时，会触发一个名为 value-changed的事件，并将一个值传递给父组件。父组件的handleValueChanged方法会捕获这个事件，并将接收到的值存储在本地状态中，然后这个值会通过props传递给ChildB组件。

子组件ChildA.vue

<template>
  <button @click="sendValueToParent">Send Value to Parent</button>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "ChildA",

  setup(props, { emit }) {
    sendValueToParent() {
      const value = 'Hello from Child A';
      emit('value-changed', value);
    }
    return {
    sendValueToParent,
    };
  },
});
</script>

父组件Parent.vue

<template>
  <div>
    <ChildA @value-changed="handleValueChanged" />
    <ChildB :value="valueFromChildA" />
  </div>
</template>
 
<script>
import { defineComponent } from 'vue';
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';
 
export default defineComponent({
    name: "Parent",
    components: {
        ChildA,
        ChildB
    },
    setup() {
        const valueFromChildA = ref('');
        function handleValueChanged(value) {
            valueFromChildA.value = value;
        };
        return {
            handleValueChanged,
        }
    }
})
</script>

子组件ChildB.vue

<template>
  <div>{{ value }}</div>
</template>
 
<script>
import { defineComponent } from 'vue'
 
export default defineComponent({
    name: "ChildB",
    props: {
        value: {
          type: String,
          default: ''
        }
    },
    setup() {
        return {}
    }
})
</script>