Question

我们说我有以下数据：

data: function() {
     return {
        a: "hello",
        b: {
          title: this.a + " BOB"
        }
     }
}

当我在组件中传递它时，this.a未定义。

<component :pass-data="b"></component>

如何发送嵌套属性？

Answer 1

调用data函数时，this.a为undefined，因此b数据属性正在初始化为"undefined BOB"。您正确地将该属性发送到子组件。

您应该使b成为计算属性：

computed: {
  b() {
    return { title: this.a + ' BOB' };
  }
}

或者在b.title方法触发后设置data的值：

data() {
  return {
    a: "hello",
    b: {
      title: ''
    }
  }
},
created() {
  this.b.title = this.a + " BOB";
}

或者，正如@Roy J所提到的，您可以在使用data方法返回之前构建数据对象：

data() {
  let a = "hello";

  return {
    a: a,
    b: {
      title: a + " BOB"
    }
  }
}

Answer 2

您可以使用计算属性

data: function() {
     return {
        a: "hello",
        b: " BOB"
     },
  computed:{
    bComputed: function(){
       return this.a + this.b;
     } 
 }
}

并传递

<component :pass-data="bComputed"></component>

PS：你的“BOB”后面的;不是编译器的问题吗？

使用Vue将对象发送到具有嵌套数据的组件的最佳方法是什么？

2 个答案: