Question

你如何继续将对象作为道具传递给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>

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

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

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

Answer 3

v-bind="yourObject"

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

不确定<component></component>。仍在挖掘Vue。尝试让我们知道。

Answer 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

在Vue上将对象作为prop传递

4 个答案: