Vue3-ts-setup语法糖-父子组件传值

<template>
  <div>
    <ChildComponent :parentData="parentData" />
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const parentData = ref('父组件数据');
 
    return {
      parentData
    };
  }
});
</script>

父组件：

<template>
  <div>
    <span>{{ parentData }}</span>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  props: {
    parentData: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 可以在这里使用props.parentData
    console.log(props.parentData);
 
    return {};
  }
});
</script>

子组件通过props接收父组件的数据，并在自己的setup函数中使用这些props。在这个例子中，父组件通过ref定义了一个响应式数据parentData，并通过属性将其传递给子组件。子组件通过props接收这个数据，并在自己的模板中显示。