vue3 使用 emit update:

Vue 3中使用 emit 和 update: 来实现父子组件之间的数据传递。

emit 用于在子组件中触发一个事件并向父组件传递数据。例如，在子组件中定义一个方法：

methods: {
  handleClick() {
    this.$emit('my-event', 'some data');
  }
}

当该方法被调用时，会在父组件中触发名为 my-event 的事件，并传递一个字符串 'some data'。

在父组件中，可以监听该事件并处理传递的数据，例如：

<template>
  <child-component @my-event="handleEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleEvent(data) {
      console.log(data); // 'some data'
    }
  }
}
</script>

update: 用于在父组件中通过 v-model 绑定子组件的数据，并在子组件中触发一个 update:modelValue 事件来更新数据。例如，在子组件中：

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

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

在父组件中，可以通过 v-model 绑定子组件的数据并监听 update:modelValue 事件，例如：

<template>
  <child-component v-model="data"></child-component>
</template>

<script>
export default {
  data() {
    return {
      data: 'initial data'
    }
  }
}
</script>

当子组件中的输入框发生变化时，会触发 update:modelValue 事件来更新父组件中绑定的 data 数据。