In single-file components used <script setup>
, props can be defineProps()
declared using macros:
method one
<script setup>
const props = defineProps(['bannerList'])
console.log(props.bannerList)
</script>
way two
const props = defineProps({
bannerList: {
type: Object,
default: () => {}
}
})
If you encounter an error
Getting a value from the `props` in root scope of `setup()` will cause the value to lose reactivity
Getting a value from ' props ' in the root scope of ' <script setup> ' will cause the value to become unresponsive
Then it may be necessary to introduce defineProps
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
bannerList: {
type: Object,
default: () => {}
}
})
</script>
Use the obtained props value
Because the obtained props value is the ref value, it can be used directly
console.log(props.bannerList)
Use in tags without writing props.
<template>
<div>
<!-- 用props获取到的值 -->
{
{ bannerList }}
</div>
</template>