vue3结合ts组件传值

在 Vue 3 中结合 TypeScript 传递组件 props 的方式与 Vue 2 中大致相同。下面是一个示例：

<template>
  <div>
    <child-component :message="message" :count="count"/>
  </div>
</template>

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

export default defineComponent({
  name: 'ParentComponent',
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello',
      count: 0,
    };
  },
});
</script>

在上面的示例中，我们定义了一个名为 ParentComponent 的组件，它包含了一个名为 ChildComponent 的子组件。我们在父组件中使用了子组件，并将 message 和 count 通过 props 传递给子组件。

接下来，让我们来看一下子组件的实现：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="incrementCount">{{ count }}</button>
  </div>
</template>

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

export default defineComponent({
  name: 'ChildComponent',
  props: {
    message: {
      type: String as PropType<string>,
      required: true,
    },
    count: {
      type: Number as PropType<number>,
      default: 0,
    },
  },
  methods: {
    incrementCount() {
      this.$emit('increment');
    },
  },
});
</script>

在子组件的实现中，我们定义了两个 props ：message 和 count。其中，message 是必须的，count 是可选的，默认值为 0。我们还定义了一个 incrementCount 方法，并在点击按钮时触发该方法并通过 $emit 方法触发一个名为 increment 的事件，以便让父组件知道子组件中的计数器被增加了。

这就是如何在 Vue 3 中结合 TypeScript 传递组件 props 的基本方法。当然，还有其他一些高级用法，例如使用 class 风格的组件定义方式，但基本原理都是相同的。