javascript - 如何访问 [__ob__ : Observer] in VueJS? 的元素

Question

我是 VueJS 的新手。有一个父组件，数据从父组件传递给子组件和孙组件。

我的子组件看起来像这样，

B.vue

import C from './c.vue'

export default{

    props:['info'],

    components:{
        'c': C
    },
    
    created: function(){
      this.getInfo();
    },

    methods: {
        getInfo: function(){
            console.log("Printing inside get method", this.info);
        }
    }
}

<template>
  <div>
    <c :info="info"></c>
  </div>
</template>

当我看到控制台时，我看到一个像这样打印的数组，

当我尝试像这样访问数组的元素时，info[0]，控制台显示未定义。我无法访问数组的元素。有人可以帮我吗？谢谢!

Answer 1

<template>
  <div>
    <c :info="info"></c>
  </div>
</template>

:info="info" 会将您的外部组件 info 属性传递给 c 组件。如果该外部组件没有属性 info，它将导致您现在可以看到的 undefined(根据评论)。

如果您只是想测试行为，而您的目标是将字符串 info 传递到您的组件 c 中，那么您可以将其作为字符串传递，例如:

<template>
  <div>
    <c :info="'info'"></c>
  </div>
</template>

或者没有::

<template>
  <div>
    <c info="info"></c>
  </div>
</template>

为什么？因为 : 是 v-bind: 的简写，它查找 javascript 对象，而且 :info="info" 等于 : info=info 您实际上想要使用 :info="'info'" 因为这将等于:info='info'。

您可以在 Vue.js 的 Props Doc 部分阅读更多有关其工作原理的信息:https://v2.vuejs.org/v2/guide/components-props.html

如果在您的外部组件中设置了 info 属性 - 让我们知道如何进一步帮助您。