将对象作为道具传递到Vue

JavaScript

NearGreen

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

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

第800篇《将对象作为道具传递到Vue》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
米亚神无 2020.03.11

编辑：在我最初的答案并创建一个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 
v-bind="yourObject"

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android