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

Question

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

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

我在 DashboardCard 组件又名子组件中声明了道具，但是所有道具的值都不能传递和分配

我现在收到了这个错误

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

Answer 1

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

从父组件（Dashboard.vue）：

尝试像:icon="'@/assets/sale.png'"和:val="'$700'"

在子组件中（DashboardCard.vue）

方法一：

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

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)" alt="icon" />

方法二：

使用计算属性

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)" alt="icon" />

Answer 2

您缺少组件中的script结束标记</script>，DashboardCard因此 Vue 无法找出组件属性。起初，我认为那里有更多代码，直到我尝试沙盒。

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

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

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