在 Vue 上将对象作为道具传递答案

【问题标题】：Pass object as prop on Vue在 Vue 上将对象作为道具传递
【发布时间】：2018-02-12 23:21:55
【问题描述】：

你如何继续在 vue 上将对象作为道具传递？我想这将是一项简单的任务，但显然不是。

我在.vue 文件中有以下代码：

<template>
  <div id="scatter"></div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    console.log(this.data);
  },
};
</script>

在 html 上，我尝试按如下方式传递 data 道具：

<component :data="{x:1}"></component>

当我尝试将其登录到控制台时，结果只是一个空的观察者对象。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

我认为问题出在代码中的其他地方，因为将对象作为道具传递就像您想象的那样简单：

// register the component
Vue.component('component', {
  props: {
    data: {
        type: Object
    }
  },
  template: '<div>Data: {{data}}</div>',
  mounted: function () {
    console.log(this.data)
  }
})

new Vue({
  el: '#example'
})

HTML：

<div id="example">
  <component :data="{x:1}"></component>
</div>

这是一个展示它的小提琴： https://jsfiddle.net/tk9omyae/

【讨论】：

有没有办法在组件中定义对象？所以父母会有类似的东西： myData = Object.create(component.dataModel);我的数据.x = 1;然后在 HTML :data="myData" ?
这在 2021 年有点不同。如果您正在 linting，它将引发错误，因为它希望 data prop 对象的 default 元素成为工厂函数。

【解决方案2】：

编辑：在我最初的回答和创建 JsFiddle 之后，我不确定你描述的行为为什么会发生。它在缩小到用例时起作用：

<script>
    export default {
       props: {
           ok: {
               type: Object,
               default: () => ({}),
           },
           data: {
               type: Object,
               default: () => ({})
           }
       }
     },
     mounted () { 
         console.log(this.data) // {x:1}
         console.log(this.ok) // {x:1}
     }
    }
</script>

还有 HTML：

<component :ok="{x:1}" :data="{x:1}"></component>

这是一个演示该行为的 JsFiddle：https://jsfiddle.net/mqkpocjh/

【讨论】：

其他变量名也是如此。
谢谢。我明白了，在 Jamie 指出之后，无论属性名称如何，它都应该可以工作。

【解决方案3】：

v-bind="yourObject"

应该在 <my-component v-bind="yourObject"><my-component>

不确定<component></component>。仍在深入研究 Vue。尝试告诉我们。

【讨论】：

【解决方案4】：

100% 工作将对象从一个组件传递到另一个组件是非常简单的方法。

子组件代码简单代码，其中 StokDetail 是一个传递自的对象
其他组件

  export default {  
     props: {
      StockDetail: {
         type: Object,
         default: (()=>{})
      },
  },
    created:function(){
        console.log(this.StockDetail);
    }
 }
 </script> ``` 
> Pass from Parent Component
>
<stock-detail-component v-bind:stock-detail="model.StockDetail"></stock-detail-component>

HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents: 
such as  StockDetail = stock-detail

you can see in this below snapshot





 


  [1]: https://i.stack.imgur.com/tIofC.png

【讨论】：