親コンポーネントに値を渡す

Question

子コンポーネントはどのようにその値を親コンポーネントに渡すことができますか？ここに私の子コンポーネントは次のとおりです。

Javascriptを：

new Vue({ 
    el: '#table-list', 
    data: { 
    tableList: ['Empty!'], 
    tableSelected: "" 
    }, 
    methods: { 
    getTableList() { 
     axios 
     .get('/tables') 
     .then(tableList => { 
      this.tableList = tableList.data; 
     }) 
     .catch(e => console.warn('Failed to fetch table list')); 
    }, 
    selectTable(table) { 
     this.tableSelected = table; 
    } 
    }, 
    mounted() { 
    this.getTableList(); 
    } 
}); 

HTML：

<div id="table-list"> 
    <p v-for="table in tableList"> 
     <i class="fa fa-table" aria-hidden="true"></i>&nbsp; 
     <span class="text-primary" v-on:click="selectTable(table)"> {{ table }} </span> 
    </p> 
</div> 

クリックで、selectTableが呼び出されると、私はその親コン​​ポーネントの値を表示するようにしたいですか？つまり、親コンポーネントにtableSelectedプロパティを渡す必要があります。どうすればこのことができますか？

Answer 1

アーカイブする内容は、vue components、具体的にはeventsというメカニズムを使用する必要があります。

小道具は、親コンポーネントから子コンポーネントへのデータを渡すためのもので、イベントは子コンポーネントから親にメッセージを送信するためのものです。

親は小道具を使用して子供にデータを渡すことができることを知りましたが、何か起こったときに親にどのように連絡しますか？ヴューのカスタムイベントシステムの出番です。

このフィドルにhttps://jsfiddle.net/AldoRomo88/sLo1zx5b/

を参照してください、私はカスタムイベント

selectTable: function(table) { 
    this.$emit('item-changed',table); 
} 

そして、あなたの親コンポーネント内に放出するためにあなたのselectTable方法を変更しましたそのイベントを聞くだけです。

<div> 
{{selectedItem}} 
</div> 

<table-list @item-changed="newValue => selectedItem = newValue " ></table-list> 

詳しい説明が必要な場合は教えてください。

Answer 2

Hereは、子供が聴いている親にイベントをどのように放出するかを説明するページです。

Hereは管理状態のページです。

あなたが目指しているものは、VUEでMVVMです。 のすべての状態をストアにしたいとします。状態の各項目は、参照された回数に関係なく、更新できる方法の数に関係なく1回保存されます。

tableSelectedは州の項目です。必要に応じて、チェーン内の状態の変更を渡すことができます。これは、コンポーネントやvueではなくストア内で終了する限りです。しかし、あなたはそれを単純に保つことができます：tableSelectedをあなたの店のプロパティにして、それを必要とするコンポーネントのdata要素で直接宣言します。厳格にしたい場合は、にchangeTableSelected()メソッドを入れてください。

1つのコンポーネントが多くのインスタンスを持つ場合、またはコンポーネントが表示されるページについて何も知らない場合は、小道具やイベントについて心配する必要があります。その時まで、私はデータと店舗の使用を好むだろう。