vue3+ts 点击时，向子组件传值

在Vue3中，向子组件传值可以使用props属性。同时，使用TypeScript可以提供类型检查和更好的代码提示。

首先，在子组件中定义props属性，例如：

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup(props) {
    return {
      // ...
    };
  }
});

这里定义了一个名为`message`的props属性，类型为字符串类型，并且是必需的。

然后，在父组件中使用子组件时，将需要传递的值绑定到子组件的props属性上，例如：

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

export default defineComponent({
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
});
</script>

这里将父组件的`parentMessage`属性绑定到子组件的`message`属性上。在子组件中，可以通过`props`参数获取到传递过来的值，例如：

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup(props) {
    console.log(props.message); // 输出：'Hello from parent'
    return {
      // ...
    };
  }
});

这样就完成了向子组件传递值的操作。