Vue3+setup父子组件传值

1.父子组件传值可以通过 props 和 emit 来实现

父组件

<template>
  <div>
    <h2>父组件</h2>
    <p>父组件传递的值: {{ parentValue }}</p>
    <ChildComponent :childValue="parentValue" @update-parent-value="updateParentValue" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const parentValue = ref('Hello from parent');

    const updateParentValue = (value) => {
      parentValue.value = value;
    };

    return {
      parentValue,
      updateParentValue
    };
  }
}
</script>

子组件

<template>
  <div>
    <h3>子组件</h3>
    <p>子组件接收的值: {{ childValue }}</p>
    <button @click="updateChildValue">更新子组件的值</button>
  </div>
</template>

<script>
import { ref, emit } from 'vue';

export default {
  props: {
    childValue: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const childValue = ref(props.childValue);

    const updateChildValue = () => {
      childValue.value = 'Updated value from child';
      emit('update-parent-value', childValue.value);
    };

    return {
      childValue,
      updateChildValue
    };
  }
}
</script>

在父组件中，我们使用 parentValue 来存储父组件传递给子组件的值，并通过 updateParentValue 方法来更新该值。子组件通过 props 接收父组件传递的值，并将其保存到 childValue 中。当子组件需要更新值时，它会通过 emit 方法触发 update-parent-value 事件，并传递新的值给父组件。