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

在Vue3中，使用`setup`函数来编写组件逻辑。与Vue2中的Options API不同，`setup`函数需要返回一个对象，这个对象包含了组件中需要使用的属性和方法。

要向子组件传递值，可以在`setup`函数中定义一个变量，然后将它作为prop传递给子组件。

例如，假设我们有一个父组件`Parent`和一个子组件`Child`，我们想要在父组件中点击按钮时向子组件传递一个字符串：

<template>
  <div>
    <button @click="handleClick">Click me</button>
    <Child :message="message" />
  </div>
</template>

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

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

    function handleClick() {
      message.value = 'Hello from parent!';
    }

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

在上面的代码中，我们首先通过`ref`函数定义了一个响应式变量`message`，并且初始值为空字符串。然后，我们定义了一个`handleClick`函数，当按钮被点击时，将`message`的值设置为`'Hello from parent!'`。

最后，在模板中，我们将`message`作为`Child`组件的`message`prop传递给子组件。

在子组件中，我们可以通过`props`参数来接收父组件传递过来的值：

<template>
  <div>{{ message }}</div>
</template>

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

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

在上面的代码中，我们定义了一个`message`prop，类型为字符串类型，并且必须传递。在`setup`函数中，我们通过`props`参数来接收父组件传递过来的`message`值，并将它赋值给本地的`message`变量。

这样，当父组件中的按钮被点击时，`message`的值会被更新，并且会自动传递给子组件。子组件会根据新的`message`值进行更新，显示出最新的信息。