脚本设置 - 如何在计算中使用道具

Question

<script setup>
import { defineProps, computed } from '@vue/runtime-core'

defineProps({
  foo: Array,
})

const length = computed(() => {
  return foo.length         // foo is not defined
})
</script>

在这个不言自明的块中，当我尝试在计算中访问 props 变量时，会抛出类似“foo is not defined”的错误

Answer 1

解构道具定义可以清除一些样板代码，并让您在整个脚本中直接访问它们:)

import { computed } from 'vue'
//since I last tested, don't need to import defineProps

const { foo } = defineProps({ 
  foo: Array,
})

const length = computed(() => {
  return foo.length
})          
</script>

Answer 2

defineProps 返回对给定 props 的引用，您可以从中访问 foo in computed：

<script setup>
import { defineProps, computed } from 'vue'
        ?
const myProps = defineProps({
  foo: Array,
})

const length = computed(() => {
  return myProps.foo.length
})          ?
</script>

demo