vue3子组件如何向父组件传值

在Vue 3中，子组件向父组件传值可以通过事件和props属性来实现。

方法一：使用事件

1. 在子组件中，使用`$emit`方法触发一个自定义事件，并传递需要传递的值。

// 子组件
methods: {
  sendDataToParent() {
    this.$emit('customEvent', value); // value是要传递给父组件的值
  }
}

2. 在父组件中，在子组件上监听这个自定义事件，并在回调函数中接收传递的值。

<!-- 父组件 -->
<template>
  <div>
    <child-component @customEvent="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(value) {
      // 在这里处理子组件传递过来的值
    }
  }
}
</script>

在子组件上使用`@customEvent`监听自定义事件，并在父组件的`handleCustomEvent`方法中接收传递的值。

方法二：使用props属性

1. 在父组件中，使用props属性声明一个变量，并将子组件需要传递的值通过props属性传递给子组件。

<!-- 父组件 -->
<template>
  <div>
    <child-component :value="propValue"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      propValue: '' // 声明一个变量用于接收子组件传递的值
    }
  }
}
</script>

2. 在子组件中，使用props属性接收父组件传递过来的值，并在组件内部使用。

// 子组件
props: {
  value: {
    type: String,
    required: true
  }
},
// 在子组件的其他地方使用this.value来使用父组件传递过来的值

通过上述两种方法，子组件就可以向父组件传递值了。您可以根据具体的场景选择合适的方法来实现子组件向父组件的数据传递。