vue3子组件向父组件传值

在Vue3中，子组件向父组件传值的方式与Vue2有所不同。以下是两种常见的方式：

1. 使用$emit方法

子组件通过$emit方法触发一个自定义事件，并将需要传递的数据作为参数传递给父组件。在父组件中通过v-on指令监听该自定义事件，并在回调函数中获取传递的数据。示例代码如下：

子组件：

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

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('child-event', 'hello world')
    }
  }
}
</script>

父组件：

<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
    <p>从子组件传递过来的数据：{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleChildEvent(data) {
      this.message = data
    }
  }
}
</script>

2. 使用v-model指令

在Vue3中，v-model指令已经不再是一个语法糖，而是一个真正的组件通信方式。在子组件中使用v-model指令绑定一个值，然后在父组件中通过props接收该值并在回调函数中更新。示例代码如下：

子组件：

<template>
  <input v-model="value">
</template>

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

父组件：

<template>
  <div>
    <child-component v-model="message"></child-component>
    <p>从子组件传递过来的数据：{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在上面的示例中，父组件中的v-model指令绑定了子组件的value属性，并且将子组件的值自动同步到了父组件的message属性中。注意，子组件需要在props中声明value属性，并且在子组件中不要直接修改value属性的值，应该通过$emit方法触发一个input事件来更新该值。