vue3 子组件向父组件传值

在Vue3中，子组件向父组件传值可以通过自定义事件和v-model指令来实现。

1. 自定义事件
子组件可以通过`$emit`方法触发一个自定义事件，并传递一个参数，父组件可以通过在子组件上监听这个自定义事件来获取这个参数。示例代码如下：

在子组件中：

<template>
  <button @click="sendValue">发送值给父组件</button>
</template>

<script>
export default {
  methods: {
    sendValue() {
      this.$emit('my-event', 'hello from child component');
    }
  }
}
</script>

在父组件中：

<template>
  <div>
    <p>子组件传递的值：{{ valueFromChild }}</p>
    <child-component @my-event="handleChildEvent"></child-component>
  </div>
</template>

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

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

2. v-model指令
v-model指令可以简化子组件向父组件传值的操作。在子组件中使用v-model指令绑定一个value属性，并在子组件中通过$emit触发input事件来更新这个value属性的值。在父组件中使用v-model指令将这个value属性绑定到父组件的数据上即可。示例代码如下：

在子组件中：

<template>
  <input :value="value" @input="updateValue">
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateValue(event) {
      this.$emit('input', event.target.value);
    }
  }
}
</script>

在父组件中：

<template>
  <div>
    <p>子组件传递的值：{{ valueFromChild }}</p>
    <child-component v-model="valueFromChild"></child-component>
  </div>
</template>

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

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