vue3+ts 父组件通过点击事件给子组件传值

在 Vue3 中，可以通过在子组件中定义一个 `props` 属性来接收父组件传递的值，并通过 `$emit` 方法在父组件中触发一个自定义事件，并传递数据给子组件。

以下是一个示例代码：

// 子组件 Child.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  }
});
</script>

// 父组件 Parent.vue
<template>
  <div>
    <button @click="sendMessage">发送消息</button>
    <child :message="message"></child>
  </div>
</template>

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

import Child from './Child.vue';

export default defineComponent({
  components: {
    Child
  },
  setup() {
    const message = ref('');

    const sendMessage = () => {
      message.value = 'Hello, World!';
    };

    return {
      message,
      sendMessage
    };
  }
});
</script>

在上面的示例代码中，父组件中通过 `@click` 事件触发了 `sendMessage` 方法，并将 `message` 的值设置为了 `'Hello, World!'`。然后将 `message` 的值通过 `:message` 语法传递给了子组件，并在子组件中通过 `props` 属性接收了父组件传递的值，并在模板中显示出来。