将对象作为道具传递到Vue

Question

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

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

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

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

<template>
  <div id="example">
    <component :data="msg"></component>
  </div>
<template/>
<script>
export default{
  data(){
    return{
      msg:{}
    }
  },
  created(){
    this.msg = { x: 6}
  }
}
<script/>

Answer 1

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

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

请尝试使用x，但不要在其中添加默认值