vue3计算属性参数传递

在 Vue3 中，可以通过使用 `computed` 函数来创建计算属性，同时，也可以通过为 `computed` 函数传递参数来动态计算属性。

下面是一个简单的示例：

<template>
  <div>
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
import { computed, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      firstName: '',
      lastName: '',
    });

    const fullName = computed(() => {
      return `${state.firstName} ${state.lastName}`;
    });

    return {
      state,
      fullName,
    };
  },
};
</script>

在这个示例中，我们创建了两个 `input` 元素来输入用户的名字和姓氏。然后，我们定义了一个 `computed` 函数 `fullName`，它返回用户的全名。我们可以在模板中引用 `fullName`，并且它会更新当 `firstName` 或 `lastName` 发生变化时。

另外，我们可以在计算属性中传递参数。例如，如果我们想要计算用户的名字的长度，我们可以这样做：

<template>
  <div>
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <p>Full Name: {{ fullName }}</p>
    <p>Name Length: {{ nameLength(1) }}</p>
  </div>
</template>

<script>
import { computed, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      firstName: '',
      lastName: '',
    });

    const fullName = computed(() => {
      return `${state.firstName} ${state.lastName}`;
    });

    const nameLength = computed(() => {
      return fullName.value.length;
    });

    return {
      state,
      fullName,
      nameLength,
    };
  },
};
</script>

在这个示例中，我们定义了一个新的 `computed` 函数 `nameLength`，它返回用户的名字长度。我们通过在计算属性中传递参数来指定要计算哪个名字的长度。在这种情况下，我们通过传递参数 `1` 来计算用户的名字的长度。