vue3 ts setup props

在Vue 3中，使用TypeScript和`<script setup>`语法来定义组件的props非常简单。你可以使用`defineProps`函数来定义props，并使用`toRefs`函数将props转换为响应式对象。

下面是一个示例代码：

<template>
  <div>
    <p>父组件传递的值：{{ fatherRef }}</p>
    <p>子组件输入框的值：{{ inputVal }}</p>
  </div>
</template>

<script setup lang="ts">
import { defineProps, toRefs, computed, defineEmits } from "vue";

const props = defineProps<{
 fatherRef: string;
}>();

const { fatherRef } = toRefs(props);

const emits = defineEmits(["changeVal"]);

const inputVal = computed({
  get() {
    return fatherRef.value;
  },
  set(val: string) {
    emits("changeVal", val);
  },
});
</script>

在上面的代码中，我们使用`defineProps`函数定义了一个名为`props`的props对象，并使用`toRefs`函数将其转换为响应式对象。然后，我们可以通过`fatherRef.value`来访问父组件传递的值，并使用`emits`函数触发`changeVal`事件来改变值。