vue3+ts 实现子组件中点击切换的值，传递到父组件中

首先，你需要在子组件中定义一个点击事件，并将它绑定到一个方法上。在这个方法中，你可以通过 `$emit` 方法将数据传递给父组件。

子组件代码：

<template>
  <div @click="handleClick">{{ value }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  methods: {
    handleClick() {
      this.$emit('update:value', this.value === 'foo' ? 'bar' : 'foo');
    },
  },
});
</script>

在父组件中，你可以通过 `v-model` 指令来绑定子组件的值，并监听 `update:value` 事件来更新父组件的值。

父组件代码：

<template>
  <div>
    <child-component v-model="myValue" />
    <div>My value is: {{ myValue }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent,
  },
  setup() {
    const myValue = ref('foo');

    return {
      myValue,
    };
  },
});
</script>

这样，当你点击子组件时，父组件中的 `myValue` 就会更新为 `'bar'` 或 `'foo'`。