盼儿哥 2022-06-01 13:16 采纳率: 60%
浏览 152
已结题

vue3组合api开发方式,想将props 内容独立放到一个js文件中,但是在import后获取不到

vue3组合api开发方式,想将props 内容独立放到一个js文件中,但是在import后获取不到
问题相关代码
//props.js
import { defineProps } from 'vue'

const props = defineProps({
    apiData: {
        type: Array,
        default: () => {
            return []
        }
    }
})

export default props
//index.vue
<template></template>
<script setup>
import props from './props'

//按钮的点击事件
const handleTest = ()=> {
  console.log(props.apiData) //这里会报错:Cannot read properties of null (reading 'apiData')
}

</script>
我想要达到的结果

将props, emits 可以独立放到一个js文件中,在xx.vue内import进来,不然xx.vue内的代码会非常多

  • 写回答

2条回答 默认 最新

  • 上官熊猫 2022-06-01 16:57
    关注

    defineProps必须要放在setup里面才可以,我们可以换个思路,只将参数提出在一个独立文件中,解决方法如下:

    // props.js
    export default {
      apiData: {
        type: Array,
        default: () => {
          return [];
        },
      },
      name: {
        type: String,
      },
    };
    
    //index.vue
    <template>
      <div class="User">index.vue页面</div>
      <button @click="handleTest">点击获取props</button>
    </template>
    
    <script setup>
    import propsData from "./props";
    const props = defineProps(propsData);
    console.log(props);
    //按钮的点击事件
    const handleTest = () => {
      console.log(props.apiData);
    };
    </script>
    

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 6月14日
  • 已采纳回答 6月6日
  • 创建了问题 6月1日

悬赏问题

  • ¥15 关于#linux#的问题(输入输出错误):出现这个界面接着我重新装系统,又让修电脑的师傅帮我扫描硬盘(没有问题)用着用着又卡死(相关搜索:固态硬盘)
  • ¥15 cv::resize不同线程时间不同
  • ¥15 web课程,怎么做啊😭没好好听课 根本不知道怎么下手
  • ¥15 做一个关于单片机的比较难的代码,然后搞一个PPT进行解释
  • ¥15 python提取.csv文件中的链接会经常出现爬取失败
  • ¥15 数据结构中的数组地址问题
  • ¥15 maya的mel里,怎样先选择模型A,然后利用mel脚本自动选择有相同名字的模型B呢。
  • ¥15 Python题,根本不会啊
  • ¥15 会会信号与系统和python的来
  • ¥15 关于#python#的问题