vue3 props ts

在Vue3中，使用TypeScript定义props的方式与Vue2基本相同。你可以在组件的`setup`函数中使用`defineProps`函数来定义props，并且可以指定props的类型以及默认值。比如，在上述代码示例中，props的定义为：

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

在这里，我们使用了`Boolean`类型作为`visible`属性的类型，并给它设置了默认值为`false`。在组件中可以像普通对象一样，通过`props.visible`来获取props的值。

另外，如果你需要监听props的变化，可以使用`watch`函数来实现。在上述代码示例中，我们通过以下代码实现了对`visible`属性的监听：

watch(() => props.visible, (val) => {
  open.value = val;
  console.log(val);
});

这里，我们将`props.visible`作为`watch`函数的第一个参数，当`visible`属性发生变化时，回调函数将被执行。

总结起来，在Vue3中使用TypeScript定义props的方式与Vue2基本相似，你可以通过`defineProps`函数定义props的类型和默认值，在`setup`函数中使用props，并通过`watch`函数监听props的变化。<span class="em">1</span><span class="em">2</span><span class="em">3</span>