Vue3 h函数子传父

在Vue3中，可以通过`emit`函数来实现子组件向父组件传递数据和事件。

首先，在父组件中定义一个方法来处理子组件传递过来的数据和事件：

<template>
  <div>
    <child-component @update-count="updateCount"></child-component>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    updateCount(value) {
      this.count = value;
    }
  }
};
</script>

在子组件中使用`$emit`函数来触发事件并将数据传递给父组件：

<template>
  <button @click="increment">Increment</button>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$emit('update-count', this.count + 1);
    }
  },
  data() {
    return {
      count: 0
    }
  }
};
</script>

当子组件中的`increment`方法被触发时，会通过`$emit`函数触发`update-count`事件，并将子组件内部的`count`值加1作为参数传递给父组件的`updateCount`方法。父组件接收到数据后，将其保存在`count`变量中，并渲染到模板中。