Vueを使用してネストされたデータを持つコンポーネントにオブジェクトを送信する最適な方法は何ですか？

Question

のは、私は次のようなデータを持っているとしましょう：

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

私はコンポーネントでこれを渡すと、this.aは未定義です。

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

どのようにネストされたプロパティを送信しますか？

Answer 1

あなたが計算されたプロパティ

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

を使用して

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

PSを渡すことができます：あなたの "BOB" ​​の背後にある;コンパイラの問題ではなかったですか？

Answer 2

data関数が呼び出されると、this.aはundefinedので、bデータプロパティが"undefined BOB"として初期化されています。そのプロパティを子コンポーネントに正しく送信しています。

あなたはb計算されたプロパティにする必要があり、次のいずれか

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

それともdata方法が発射された後b.titleの値を設定します。@Roy Jが述べたように

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

かを、あなたができますデータオブジェクトを作成してから、dataメソッドに戻る前に：

data() { 
    let a = "hello"; 

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