uniapp父传子vue3

在uniapp中，通过父组件向子组件传递数据可以使用Vue3的Composition API中的`setup()`函数。首先，在父组件中，可以通过props将数据传递给子组件。在子组件中，可以使用`toRefs`将传入的props解构为响应式的属性，以便在子组件中监听和使用这些属性。

在父组件中，定义一个props对象，并在子组件中引入该props对象。然后，在子组件的`setup()`函数中，使用`toRefs`对父组件传递的props进行解构，并将解构后的属性赋值给子组件中的变量。这样，子组件就可以监听和使用父组件传递的数据了。

举个例子，假设父组件传递了一个名为`message`的属性给子组件，在子组件中可以这样使用：

// 父组件
<template>
  <ChildComponent :message="message" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent'
    }
  }
}
</script>

// 子组件
<script>
import { toRefs } from 'vue'

export default {
  props: ['message'],
  setup(props) {
    const { message } = toRefs(props)

    // 监听和使用父组件传递的数据
    // ...
    
    return {
      message
    }
  }
}
</script>

在这个例子中，父组件通过属性`message`将数据传递给子组件。在子组件的`setup()`函数中，使用`toRefs`解构父组件传递的props，然后将解构后的属性赋值给子组件中的变量`message`。子组件就可以通过监听和使用`message`来获取父组件传递的数据了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue3+ts+vite+uniapp 父传子 子传父](https://blog.csdn.net/m0_60708088/article/details/125069282)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [uni-app vue3+ts 父组件向子组件传值，子组件不更新值](https://blog.csdn.net/wangzongyang1025_/article/details/126255261)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]