ホームページ > 記事 > ウェブフロントエンド > vue3 コンポーネント間で通信するにはどうすればよいですか?コミュニケーション方法の簡単な分析
vue3 を作成するプロジェクトでは、すべてのコンポーネントと通信します。pinia パブリック データ ソースの使用に加えて、どのような簡単な API メソッドを使用できますか?次に、親子コンポーネント間および子親コンポーネント間で通信するいくつかの方法を紹介します。
親子コンポーネントについて最初に考えることcommunication is props, 子コンポーネントで受け入れられる props を宣言し、対応するキーと値を親コンポーネントから渡します。 このようにして、渡されたプロパティと値を受け取ることができます。子コンポーネント上の親コンポーネント。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]
具体的な実装は次のとおりです:
// children.vue <template> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="index"> {{item}} </li> </ul> </template> <script setup> import { defineProps } from 'vue'; const props = defineProps({ list :{ type: Array, default: () => {} } }) </script>rrree
上図のように、親コンポーネントから渡されたリスト配列を子コンポーネントに表示するだけでなく、リストにデータを追加して子コンポーネントのデータを更新できるようにしました。
props についての説明が終わったら、2 番目に紹介したいのは、vue3 のオプションである Provide と Inject を組み合わせたものです。
Projct は、子孫コンポーネントによって注入できる値を提供するために使用されます。一方、inject は、一致するプロパティを宣言し、上位プロバイダーからの一致によって現在のコンポーネントに注入されるようにするために使用されます。 コードは次のように実装されます。
// parent.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="请输入"> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> <!-- child --> <childrenVue :list="list"></childrenVue> </template> <script setup> import { ref } from 'vue'; import childrenVue from './children.vue'; const value = ref('') const list = ref(['javaScript', 'Html', 'CSS']) const handleAdd = () =>{ list.value.push(value.value) value = '' } </script>
// children.vue <template> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li> </ul> </template> <script setup> import { inject } from 'vue'; const list = inject('list') </script>
上の図に示すように、provide
API を使用して、 list
、値は list.value
で、子コンポーネントがそのデータ ソースを変更できないようにするため、list,value
は読み取り専用属性に設定されます。親コンポーネント。次に、inject
API が list
を受け取り、親コンポーネントと子コンポーネント間の通信を実装しました。
上記で親から子に値を渡すためのメソッドを 2 つ紹介しましたが、開発では次のようにします。子が親コンポーネントに値を渡すとき、それをどのように解決すればよいでしょうか?最初のメソッドは vue3 の defineEmits
API です。コードは次のように実装されています:
// parent.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="请输入"> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> <!-- child --> <childVue /> </template> <script setup> import childVue from "./child.vue"; const { ref, provide, readonly } = require("vue"); const value = ref('') const list = ref(['javaScript', 'HTML', 'CSS']) provide('list', readonly(list.value)) const handleAdd = () => { list.value.push(value.value) } </script>
// children.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="请输入" /> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> </template> <script setup> const { ref, defineEmits } = require("vue"); const value = ref('') const emits = defineEmits(['add']) //父传子 // 给父组件传一个函数 const handleAdd = () => { emits('add', value.value) value.value= '' } </script>
上の図に示すように、 subcomponent Emit
は、追加イベントを親コンポーネントに送信して受信し、同時に親コンポーネント上でそれを呼び出して追加されたロジックを実行し、## の value
を変更します。 #input を空にすると、親コンポーネントが子コンポーネントにパラメータを渡します。
defineEmits を導入した後、同じ目的を持つ別の
v-model:xxx を導入しましょう。 Emit メソッドは次のように実装されます。
// parent.vue <template> <childVue @add='handleAdd'/> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li> </ul> </template> <script setup> import { ref } from '@vue/reactivity'; import childVue from './child.vue'; const list = ref(['javaScript', 'HTML', 'CSS']) const handleAdd = (val) => { list.value.push(val) } </script>
// children.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="请输入" /> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> </template> <script setup> const { ref, defineProps, defineEmits } = require("vue"); const value = ref('') const props = defineProps({ list: { type: Array, default: () => [] } }) const emits = defineEmits(['list']) // 给父组件一点东西 const handleAdd = () => { // props.list.push(value.value) //不建议直接修改props的值 把握不住数据源的流转 const arr = props.list arr.push(value.value) emits('list', arr) value.value= '' } </script>上記の
defineEmits メソッドと比較すると、これら 2 つのメソッドが一致していることが誰でもわかると思います。それらの違いは何ですか?ここでは、まず親コンポーネントの
list を子コンポーネントに渡し、次に子コンポーネントで親コンポーネントのデータ ソースを変更し、同時に
emit を返します。親コンポーネント、子コンポーネントを実現するコンポーネントは、親コンポーネントに値を渡します。
vuejs 入門チュートリアル 、基本プログラミング ビデオ )
以上がvue3 コンポーネント間で通信するにはどうすればよいですか?コミュニケーション方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。