Vue3 模板，嵌套对象的短路径属性

Question

如何准备一个属性模板？此代码引发错误：

<script setup>
  ...
  const props = defineProps<{ datails: TData }>();
  const value = props.datails.value; // i dont want to use long paths in the template
</script>

<template>
  <div>
    <a>{{ value }}</a>
...

错误： error Getting a value from the 'props' in root scope of will cause the value to lose reactivity vue/no-setup-props-destructure

请问如何在模板中缩短数据绑定路径？

Answer 1

这是将 props 快速转换为 refs 的方法：

<script setup>
  import { toRefs } from 'vue';
  const props = defineProps({ details: String });
  
  const { details } = toRefs(props);
</script>

<template>
  <div>
    <a>{{ details }}</a>
  </div>
</template>

你得到的错误可以通过编写 ref(props.datails.value) 来防止，这样对象就不会失去反应性。

注意defineProps

的用法

Vue3 模板，嵌套对象的短路径属性

Vue3 template, short path to nested object property

templates

vuejs3

Vue3 模板，嵌套对象的短路径 属性

Vue3 template, short path to nested object property

templates

vuejs3

Vue3 模板，嵌套对象的短路径属性