Vuejs将道具从父组件传递到子组件不起作用

Posted 2023-04-13

【中文标题】Vuejs将道具从父组件传递到子组件不起作用

【英文标题】：Vuejs passing props to from parents component to child component not working

【发布时间】：2021-12-28 02:22:20

【问题描述】：

我是新手，负责一个使用 Vuejs 的项目。

这是一个使用名为 DashboardCard 的组件的页面，每个 DardboardCard 都传递了 2 个道具是 val 和来自页面的图标，也就是父组件

我在 DashboardCard 组件中声明了 props 也就是子组件，但是所有 props 的值都不能传递和分配

我现在遇到了这个错误

更新 这里是 Vuejs devtool 日志，可以看到 props 被传递了

【问题讨论】：

尝试像:icon="'@/assets/sale.png'"和:val="'$700'"一样传递它

你在 Vue 开发工具中看到 icon 属性了吗？还是您尝试将其注销？

你能用你的代码创建一个小提琴或沙箱吗？

@Amaarrockz 没什么区别

@Amaarrockz 你可以试试这个codesandbox.io/s/trusting-meadow-5zuee?file=/src/components/…

【参考方案1】：

原因是，在道具持有价值之前，您就试图访问它。所以我建议有两种方法

来自父组件（Dashboard.vue）：

尝试像 :icon="'@/assets/sale.png'" 和 :val="'$700'" 一样传递它

在子组件中（DashboardCard.vue）

方法一：

声明两个数据变量并使用监视处理程序将它们设置为prop值

export default 
 components: DatePicker,
 props: 
   icon: 
     type: String,
     default: ''
   ,
   val: 
     type: String,
     default: ''
   
 ,
 data() 
  return 
    iconPath: '',
    amtVal: ''
  ;
 ,
 watch: 
  icon(newVal, oldVal) 
    this.iconPath = newVal;
  ,
  val(newVal, oldVal) 
    this.amtVal = newVal;
  
 

并在模板中使用您的本地数据变量，例如

<span>amtVal</span>

and

<img :src="require(iconPath)"  />

方法二：

使用计算属性

export default 
 components: DatePicker,
 props: 
   icon: 
     type: String,
     default: ''
   ,
   val: 
     type: String,
     default: ''
   
 ,
 computed: 
   getIcon() 
     return this.icon;
   ,
   getVal() 
    return this.val;
   
 

在模板中

<span>getVal</span>

and

<img :src="require(getIcon)"  />

【讨论】：

两种方法我都试过了，没有发生和一开始一样的错误，请你修改这个codeandboxcodesandbox.io/s/trusting-meadow-5zuee?file=/src/components/…

【参考方案2】：

您在 DashboardCard 组件中缺少 script 结束标记 </script>，因此 Vue 无法识别组件属性。起初，我认为在我尝试沙盒之前还有更多代码。

请注意，在 Vue devtools 扩展中，prop 应该位于 props 选项卡下，这不是您的情况。

我建议您使用某种 sn-ps 来避免这种烦人的拼写错误。对我来说，我使用Vetur。它还有助于语法高亮，非常方便的扩展。

https://marketplace.visualstudio.com/items?itemName=octref.vetur