uniapp vue3如何父组件传过去的值更新子组件内容

### 实现父组件向子组件传递 `props` 并更新子组件内容

在 UniApp 中使用 Vue 3 的组合式 API 可以方便地实现父子组件之间的通信。具体来说，父组件可以通过定义属性 (`props`) 将数据传递给子组件，并且这些属性可以在子组件内部被响应式地访问。

#### 定义父组件

父组件负责提供要传递的数据以及触发任何必要的逻辑来改变该数据：

<template>
  <view class="container">
    <!-- 调用子组件并传递 prop -->
    <child-component :current-selected="selectedItem"></child-component>

    <!-- 更改 selectedItem 的按钮 -->
    <button @click="updateSelectedItem">更改选中项</button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
let selectedItem = ref('初始值');

function updateSelectedItem() {
  // 修改 selected item 的值
  selectedItem.value = '新值';
}
</script>

这段代码展示了如何设置一个可变的状态变量 `selectedItem` 和一个用于修改这个状态的方法 `updateSelectedItem()`[^2]。

#### 接收和处理来自父组件的 Prop

为了使子组件能够接收到由父组件发出的信息，需要利用 `defineProps` 来声明预期接收的属性列表及其默认值（如果有的话）。下面是一个简单的例子说明了这一点：

<template>
  <div>{{ displayText }}</div>
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue';

interface Props {
  currentSelected?: string;
}

const props = withDefaults(defineProps<Props>(), {
  currentSelected: '',
});

// 计算显示文本
const displayText = computed(() => props.currentSelected);
</script>

这里的关键在于使用 TypeScript 类型接口 `Props` 明确指定了 `currentSelected` 属性的存在性和类型；并通过 `withDefaults` 函数设置了它的默认为空字符串的行为。

一旦完成了上述配置，每当父组件中的 `selectedItem` 发生变化时，它就会自动同步到子组件内的 `displayText` 上，从而实现了实时的内容刷新效果。