Vue3——setup语法糖父子之间传值

<template>
  <div>
    <ChildComponent :parentData="parentData" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
 
const parentData = ref('父组件数据')
</script>

父组件：

<template>
  <div>
    <p>父组件数据：{{ parentData }}</p>
    <ChildComponent :parentData="parentData" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
 
const parentData = ref('父组件数据')
</script>

子组件：

<template>
  <div>
    <p>子组件接收的数据：{{ parentData }}</p>
  </div>
</template>
 
<script setup>
import { defineProps } from 'vue'
 
const props = defineProps({
  parentData: String
})
</script>

在这个例子中，我们创建了一个父组件，它通过属性传递(props)数据给子组件。子组件使用defineProps来定义它所接收的属性。这展示了如何在Vue 3的<script setup>语法中实现父子组件之间的通信。