vue3 コンポーネント間で通信するにはどうすればよいですか?コミュニケーション方法の簡単な分析

vue3 を作成するプロジェクトでは、すべてのコンポーネントと通信します。pinia パブリック データ ソースの使用に加えて、どのような簡単な API メソッドを使用できますか?次に、親子コンポーネント間および子親コンポーネント間で通信するいくつかの方法を紹介します。

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

1.1 defineProps

親子コンポーネントについて最初に考えること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 &#39;vue&#39;;
const props = defineProps({
    list :{
        type: Array,
        default: () => {}
    }
})
</script>

rrree

上図のように、親コンポーネントから渡されたリスト配列を子コンポーネントに表示するだけでなく、リストにデータを追加して子コンポーネントのデータを更新できるようにしました。

1.2 Provide/inject

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 &#39;vue&#39;;
import childrenVue from &#39;./children.vue&#39;;
const value = ref(&#39;&#39;)
const list = ref([&#39;javaScript&#39;, &#39;Html&#39;, &#39;CSS&#39;])
const handleAdd = () =>{
    list.value.push(value.value)
    value = &#39;&#39;
}
</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 &#39;vue&#39;;
const list = inject(&#39;list&#39;)
</script>

上の図に示すように、provide API を使用して、 list 、値は list.value で、子コンポーネントがそのデータ ソースを変更できないようにするため、list,value は読み取り専用属性に設定されます。親コンポーネント。次に、injectAPI が list を受け取り、親コンポーネントと子コンポーネント間の通信を実装しました。

2. 子-親コンポーネントの通信

2.1 defineEmits

上記で親から子に値を渡すためのメソッドを 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(&#39;&#39;)
const list = ref([&#39;javaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
provide(&#39;list&#39;, 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(&#39;&#39;)
const emits = defineEmits([&#39;add&#39;]) //父传子

  // 给父组件传一个函数
const handleAdd = () => {
    emits(&#39;add&#39;, value.value)
    value.value= &#39;&#39;
}
</script>

上の図に示すように、 subcomponent Emit は、追加イベントを親コンポーネントに送信して受信し、同時に親コンポーネント上でそれを呼び出して追加されたロジックを実行し、## の value を変更します。 #input を空にすると、親コンポーネントが子コンポーネントにパラメータを渡します。

2.2 v-model:xxx quit

defineEmits を導入した後、同じ目的を持つ別の v-model:xxx を導入しましょう。 Emit メソッドは次のように実装されます。

// parent.vue
<template>  
    <childVue @add=&#39;handleAdd&#39;/>
    <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 &#39;@vue/reactivity&#39;;
import childVue from &#39;./child.vue&#39;;
const list = ref([&#39;javaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
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(&#39;&#39;)
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})
const emits = defineEmits([&#39;list&#39;])
  // 给父组件一点东西
const handleAdd = () => {
    // props.list.push(value.value)  //不建议直接修改props的值 把握不住数据源的流转
    const arr = props.list
    arr.push(value.value)
    emits(&#39;list&#39;, arr)
    value.value= &#39;&#39;
}

</script>

上記の

defineEmits メソッドと比較すると、これら 2 つのメソッドが一致していることが誰でもわかると思います。それらの違いは何ですか?ここでは、まず親コンポーネントの list を子コンポーネントに渡し、次に子コンポーネントで親コンポーネントのデータ ソースを変更し、同時に emit を返します。親コンポーネント、子コンポーネントを実現するコンポーネントは、親コンポーネントに値を渡します。

(学習ビデオ共有:

vuejs 入門チュートリアル 、基本プログラミング ビデオ )

以上がvue3 コンポーネント間で通信するにはどうすればよいですか?コミュニケーション方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。