将对象作为道具传递到Vue

NearGreen2020-03-11

您如何继续传递对象作为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>

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

米亚神无2020/03/11 20:19:20

编辑：在我最初的答案并创建一个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/

阿飞猿2020/03/11 20:19:20

v-bind="yourObject"

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

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer