vue.jsコンポーネントをレンダリングしてデータを渡す

Question

親コンポーネントをレンダリングする方法、ページの一部のリストにコントラクトリストを表示する方法、ユーザーがそれらのコンポーネントの1つをクリックしたときに、特定の契約の詳細をページの他の部分に表示します。それは、

Vue.component('manage-template', { 
    template: '#manage-contracts-template' 
    }); 

    Vue.component('view-contract', { 
    template: '#view-contract-template', 
    props: ['show_contract'], 
    data: function() { 
     return { 
     name: '' 
     } 
    }, 
    methods: { 
     showContract: function(contract) { 
     return this.name = contract.name 
     } 
    } 
    }); 

    Vue.http.headers.common['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content'); 
    var contractsResource = Vue.resource('/all_contracts{/id}.json'); 

    var contracts = new Vue({ 
    el: '#contracts_area', 
    data: { 
     currentView: 'manage-template', 
     contractsAry: [], 
     errors: {} 
    }, 
    mounted: function() { 
     var that = this; 
     contractsResource.get().then(
     function(res) { 
      that.contractsAry = res.data; 
     } 
    ) 
    }, 
    methods: { 
     showContract: function(contract) { 
     this.currentView = 'view-contract' 
     } 
    } 
    }); 

ユーザーが.filter-セクションで任意の契約項目をクリックしたときになるように基本的に私はそれが欲しい：

#contracts_area 
    .filter-section 
    ul 
     li.filter-item v-for="contract in contractsAry" :key="contract.id" @click="showContract(contract)" 
     | {{ contract.name }} 
    .display-section 
    component :is="currentView" transition="fade" transition-mode="out-in" 

script type="text/x-template" id="manage-contracts-template" 
    div 
    h1 Blank when page is newly loaded for now 

script type="text/x-template" id="view-contract-template" 
    div :apply_contract="showContract" 
    h1#display-item__name v-name="name" 

ではJavaScript：ここ

は私のスリムなファイルです.display-sectionにその契約のデータが表示されます。どうすればこれを達成できますか？

Answer 1

要するに、値をpropにバインドすることができます。

.display-section 
    component :is="currentView" :contract="currentContract" 

ビュー契約

props: ['contract'] 

契約-エリア

data: { 
    currentContract: null, 
}, 
methods: { 
    showContract: function(contract) { 
    this.currentView = "view-contract"; 
    this.currentContract = contract; 
    } 
} 

---

Vueの中にデータを渡すために複数の方法があります。

1. 値をpropsにバインドします。
2. refを使用すると、子コンポーネントから直接メソッドを呼び出すことができます。
3. Custom Events。イベントをグローバルに渡すには、グローバルイベントバスが必要です。
4. 真理（すなわちvuex）の単一の中央ソース

IはCodepenに

を方法1、2、3を図示している NDと番目の方法は、後にのみ動作することに注意してくださいコンポーネントがレンダリングされました。あなたの場合、currentViewのコンポーネントは動的なので、ユーザーがクリックすると、display-sectionコンポーネントはまだ存在しません。まだイベントは受信されません。そのコンテンツは最初は空になります。

これを回避するには、子コンポーネントから$parentのmounted()に直接アクセスすることができます。もう1つの解決策はコンポーネントを作成することですが、conditionally displayingです。また、もう1つの解決策は、子コンポーネントがマウントされてイベントが発生するまで待つことです。

あなたのニーズが単純な場合、私は小道具（）に値をバインドすることをお勧めします。そうでない場合は、vuexのようなものを使用することを検討してください。