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

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

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

`

导出默认值{
道具：{
数据：{
类型：对象，
默认值：（）=>（{}）
}
},
挂载（）{
console.log（this.data）
}
}

`

在html上，我尝试传递

数据

道具，如下所示：

---

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

编辑：在我的初始答案和创建JSFIDLE之后，我不确定您描述的行为发生的原因。当缩小到用例时，它可以工作：

<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>

导出默认值{
道具：{
好:{
类型：对象，
默认值：（）=>（{}），
},
数据：{
类型：对象，
默认值：（）=>（{}）
}
}
},
挂载（）{
console.log（this.data）/{x:1}
console.log（this.ok）/{x:1}
}
}

以及HTML：

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

---

下面是一个演示该行为的JSFIDLE:

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

// 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'
})

//注册组件
Vue.component（'component'{
道具：{
数据：{
类型：对象
}
},
模板：“数据：{{Data}}”，
挂载：函数（）{
console.log（this.data）
}
})
新Vue({
el:“#示例”
})

HTML:

这里有一把小提琴在演奏：

该怎么办

不确定

。还在挖Vue。试着让我们知道。

100%工作正常 将对象从一个组件传递到另一个组件非常简单

子组件代码StokDetail是从中传递的对象的简单代码
其他成分

导出默认值{
道具：{
库存详情：{
类型：对象，
默认值：（（）=>{}）
},
},
已创建：函数（）{
console.log（this.StockDetail）；
}
}
``` 
>从父组件传递
>
HTML属性不区分大小写，因此当使用非字符串模板时，camelCased prop名称需要使用它们的串大小写（以连字符分隔）等价物：
例如StockDetail=库存详细信息
您可以在下面的快照中看到
[1]: https://i.stack.imgur.com/tIofC.png

其他变量名也会出现同样的情况。谢谢。我知道，在Jamie指出它之后，它应该工作，而不考虑属性名。有没有方法定义组件中的对象？因此，父级将有如下内容：myData=Object.create（component.dataModel）；myData.x=1；然后在HTML:data=“myData”中？

// 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'
})

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

v-bind="yourObject"

  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