vue3.2 props的使用

在使用 <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>