傳遞對象作爲道具上的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>

當我嘗試登錄到第e控制檯的結果只是一個空的觀察者對象。

Answer 1

編輯：我的初步答案和創建一個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 2

我相信這個問題是其他地方的你的代碼作爲道具傳遞一個對象就像你想像的那樣簡單：

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