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

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

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

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

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

演示