vue.js コンポーネント間でデータを渡す方法

前書き

コンポーネントは vue.js の最も強力な機能の 1 つであり、コンポーネント インスタンスのスコープは互いに独立しています。つまり、異なるコンポーネント間のデータは相互に参照できません。データをどのように転送するかもコンポーネントの重要な知識ポイントの 1 つになります。

コンポーネント

コンポーネント間にはさまざまな関係もあります。父と子と兄弟の関​​係（父と子ではないものを仮に兄弟と呼ぶ）。

原著者: Lin Xin、著者ブログ:

親子コンポーネント

親子関係とは、コンポーネント A がテンプレート内でコンポーネント B を使用し、コンポーネント A が親コンポーネント、コンポーネント B が子コンポーネントであることを意味します。

// 注册一个子组件Vue.component(&#39;child&#39;, {data: function(){text: &#39;我是father的子组件！&#39;}template: &#39;<span>{{ text }}</span>&#39;})// 注册一个父组件Vue.component(&#39;father&#39;, {template: &#39;<div><child></child></div>&#39;  // 在模板中使用了child组件})

父親コンポーネントを直接使用する場合:

<div id="app"><father></father></div>

ページはレンダリングされます: 私は父親の子コンポーネントです!

親コンポーネントはテンプレート内の子コンポーネントを使用しているので親コンポーネントであり、子コンポーネントが使用されているので子コンポーネントは子コンポーネントです。

兄弟コンポーネント

2 つのコンポーネントが相互に参照していない場合、それらは兄弟コンポーネントです。

Vue.component(&#39;brother1&#39;, {template: &#39;<div>我是大哥</div>&#39;})Vue.component(&#39;brother2&#39;, {template: &#39;<div>我是小弟</div>&#39;})

コンポーネントを使用する場合:

<div id="app"><brother1></brother1><brother2></brother2></div>

ページは次のようにレンダリングされます:

私は兄です

私は弟です

Prop

子コンポーネントが親のデータを使用したい場合コンポーネントを渡す必要があります。子コンポーネントの props オプションを使用して、親コンポーネントによって渡されたデータを取得します。以下では、.vue ファイルの形式を使用して例を記述します。

データの受け渡し方法

親コンポーネントfather.vue内で子コンポーネントchild.vueを参照し、nameの値を子コンポーネントに渡します。

<template><div class="app">// message 定义在子组件的 props 中<child :message="name"></child></div></template><script>import child from &#39;./child.vue&#39;;export default {components: {child},data() {return {name: &#39;linxin&#39;}}}</script>

子コンポーネント child.vue の props オプションで取得するデータを宣言します

<template><span>Hello {{message}}</span></template><script>export default {// 在 props 中声明获取父组件的数据通过 message 传过来props: [&#39;message&#39;]}</script>

その後、ページがレンダリングされます: Hello linxin

一方向データ フロー

親コンポーネント 変更が発生すると、子コンポーネントのビューが自動的に更新されます。ただし、子コンポーネントでは props を変更したくありません。これらのデータを変更する必要がある場合は、次の方法を使用できます:

方法 1: prop をローカル変数に割り当て、必要に応じて prop に影響を与えずにローカル変数を変更します

export default {data(){newMessage: null  },props: ['message'],created(){this.newMessage = this.message;}}

方法 2:計算されたプロパティのプロセス props

export default {props: ['message'],computed{newMessage(){return this.newMessage + ' 哈哈哈';}}}

カスタム イベント

prop は一方向のバインドです。親コンポーネントのプロパティが変更されると、それは子コンポーネントに送信されますが、その逆は行われません。子コンポーネントの prop 値を変更しても、ビューを更新するために親コンポーネントに戻されることはありません。では、子コンポーネントはどのようにして親コンポーネントと通信するのでしょうか?

それはカスタムイベントです。親コンポーネント $on(eventName) でカスタム イベントをリッスンすることにより、子コンポーネントの $emit(eventName) がカスタム イベントをトリガーすると、親コンポーネントは対応する操作を実行します。

たとえば、親コンポーネントでポップアップ サブコンポーネントの表示を制御する場合、サブコンポーネントで閉じるを押した後、それを非表示にするように親コンポーネントに指示すると、親コンポーネントは次の操作を実行します。ポップアップボックスを非表示にします。

<template><div class="app">// hide 为自定义事件，名字可以自己随便起，不能有大写字母，可以使用短横线
        // @hide 监听子组件触发 hide 事件，则会执行 hideDialog 方法<dialog :is-show="show" @hide="hideDialog"></dialog><button @click="showDialog">显示弹框</button></div></template><script>import dialog from &#39;./dialog.vue&#39;;export default {components: { dialog },data() {return {show: false}},methods: {showDialog() {this.show = true;},hideDialog() {this.show = false;}}}</script>

子コンポーネントのdialog.vue内:

<template><div class="dialog" v-show="isShow"><p>这里是弹框子组件</p><button @click="toHide">关闭弹框</button></div></template><script>export default {// 驼峰式命名的 prop 需要转换为相对应的短横线隔开式 is-showprops: [&#39;isShow&#39;],methods: {toHide(){// $emit 方法触发父组件的监听事件this.$emit(&#39;hide&#39;);}}}</script>

これにより、親コンポーネントと子コンポーネント間の相互通信が実現されます。

Vuex

上記の例はすべて親子関係のコンポーネントに基づいていますが、他のレベルの関係では実装がより面倒になります。そうすれば、Vuex はさまざまなコンポーネント間のリアルタイム通信をより適切にサポートできるようになります。 Vuex については、私の他の記事をご覧ください: Vuex は To-Do アイテムのステータス管理をモジュール化します

概要

コンポーネント通信は、一部の単純なデータ転送については、必ずしも Vuex を使用する必要はありません。この記事では、コンポーネントのパラメータの受け渡しに関する基本的な知識を主に記録します。実際の実践では、prop を使用してサブコンポーネントの表示と非表示を行ったり、vuex を使用してコンポーネント間のデータ状態管理を実装したりすることができます。

以上がvue.js コンポーネント間でデータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。