vue3setup语法糖中计算属性

在Vue 3的setup语法糖中，可以使用计算属性来派生出新的响应式数据。具体的使用方法如下：

1. 在`<script setup>`标签中使用`ref`函数来创建响应式数据。
2. 使用`computed`函数来定义计算属性，它接收一个函数作为参数，该函数返回计算属性的值。
3. 在返回的对象中，将计算属性添加到`setup`函数的返回对象中，以便在模板中使用。

举个例子，假设我们有一个父组件和一个子组件，父组件中引用了子组件，并想在子组件中定义一个计算属性来根据父组件传递的值进行计算。代码如下：

父组件：

<template>
  <ListItem ref="listItem"></ListItem>
  <div @click="onClick">获取子元素上的属性</div>
</template>

<script setup>
import ListItem from './detailConditionFilter/ListItem.vue';
let listItem = ref();

const onClick = () => {
  console.log("子组件上的属性", listItem.value);
}
</script>

子组件：

<template>
  <div>{{ fullName }}</div>
</template>

<script setup>
import { computed } from 'vue';
let firstName = ref('John');
let lastName = ref('Doe');

const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value;
});

// 将计算属性添加到setup函数的返回对象中
defineExpose({ fullName });
</script>

在这个例子中，子组件中定义了两个响应式数据`firstName`和`lastName`，并通过计算属性`fullName`来派生出新的响应式数据。在父组件中，我们可以通过`listItem.value.fullName`来获取子组件上的计算属性值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3 setup语法糖](https://blog.csdn.net/weixin_44217741/article/details/126548221)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3 setup语法糖 简单使用](https://blog.csdn.net/m0_63108819/article/details/125534809)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]