在Vue上将对象作为prop传递

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

我相信问题在你的代码中的其他地方,因为将对象作为prop传递就像你想象的那样简单:

// 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。尝试让我们知道。