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

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>

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

原文由 Diego Gallegos 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 Jamie Curnow 发布，翻译遵循 CC BY-SA 3.0 许可协议