The use of vue3.2 props

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>

Guess you like

Origin blog.csdn.net/m0_59338367/article/details/126499917