在使用 <script setup>
的单文件组件中,props 可以使用 defineProps()
宏来声明:
方式一
<script setup>
const props = defineProps(['bannerList'])
console.log(props.bannerList)
</script>
方式二
const props = defineProps({
bannerList: {
type: Object,
default: () => {}
}
})
如果遇到报错
Getting a value from the `props` in root scope of `setup()` will cause the value to lose reactivity
从' <script setup> '根作用域的' props '获取值将导致该值失去反应性
则可能是需要引入defineProps
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
bannerList: {
type: Object,
default: () => {}
}
})
</script>
使用获取到的props值
因为获取到的是props值是ref值,所以可以直接使用
console.log(props.bannerList)
在标签中使用不用写props.
<template>
<div>
<!-- 用props获取到的值 -->
{
{ bannerList }}
</div>
</template>