Vueコンポーネント通信におけるデータ更新スキームの解析

Vue コンポーネント通信におけるデータ更新スキームの分析

Vue 開発において、コンポーネント通信は重要な役割を果たします。コンポーネント通信において、データの更新は不可欠なリンクです。この記事では、Vue コンポーネント通信におけるデータ更新スキームを分析し、コード例を通して説明します。

1. 親子コンポーネント通信

親子コンポーネント通信では、親コンポーネントは props を通じて子コンポーネントにデータを渡し、子コンポーネントはデータを送信できます。イベント $emit を通じて親コンポーネントに送信します。

コード例:

// 親コンポーネント App.vue

<script><br>'./ChildComponent.vue' から ChildComponent をインポート;</p><p>デフォルトの {<br> コンポーネントをエクスポート: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>ChildComponent</pre><div class="contentsignin">ログイン後にコピー</div></div><p>} ,<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { message: 'Hello World' }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><p>},<br> メソッド: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>handleUpdate(data) { this.message = data; }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>

/ / ChildComponentChildComponent.vue

<script><br> デフォルトのエクスポート{<br> props: ['message'],<br> メソッド: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>sendMessage() { this.$emit('update', 'Hello Vue'); }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>

この例では、親コンポーネントは、props を通じて子コンポーネントに message 属性を渡します。子コンポーネントがボタンをクリックすると、イベント $emit を通じて更新イベントが親コンポーネントに送信され、データとして「Hello Vue」が渡されます。親コンポーネントの handleUpdate メソッドはデータを受信すると、それをメッセージに割り当てて、データを更新します。

2. 兄弟コンポーネント通信

兄弟コンポーネント通信では、共通の親コンポーネントでデータを定義し、props とイベントを通じてそれぞれデータを更新できます。

コード例:

// 親コンポーネント App.vue

<script><br>'./ChildComponent1.vue' から ChildComponent1 をインポート;<br>'./ChildComponent2.vue' から ChildComponent2 をインポート;</p><p>デフォルトのエクスポート { <br> コンポーネント: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>ChildComponent1, ChildComponent2</pre><div class="contentsignin">ログイン後にコピー</div></div><p>},<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { message: 'Hello World' }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><p>},<br> メソッド: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>handleUpdateMessage(data) { this.message = data; }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>

// 子コンポーネント ChildComponent1.vue