vue3学习笔记六：computed、props使用

最新推荐文章于 2024-09-06 09:13:39 发布

前端技术负责人

最新推荐文章于 2024-09-06 09:13:39 发布

阅读量3.1k

点赞数

文章标签： vue vue3 前端

本文链接：https://blog.csdn.net/weixin_43837268/article/details/121547859

版权

这篇博客探讨了一个Vue.js组件的props使用，展示了如何通过props传递数据。在setup函数中，初始化了状态并创建了一个计算属性`passengerName`，用于根据乘客类型生成描述。博客还提到了对数组的处理，暗示了状态管理在前端开发中的应用。

摘要由CSDN通过智能技术生成

  props: {
    passengers: {
      type: Array as PropType<any[]>,
      default: () => []
    }
  },
   setup(props) {
    const state = reactive({
      count: 0,
      childPayPopShow: false,
      progress: new Array(99),
      passengerName: computed(() => {
        let str = ''
        props.passengers.forEach(item => {
          const { passengerType, name } = item
          if (str) str += '、'
          str += name
          if (passengerType == 2) {
            str += '(儿童)'
          } else if (passengerType == 3) {
            str += '(学生)'
          }
        })
        return str
      })
    })