Vue3 コンポーネント間で通信するにはどうすればよいですか? 10 種類以上のコミュニケーション方法を共有

Vueコンポーネント間で通信するにはどうすればよいですか?次の記事では、10 以上の Vue3 コンポーネントの通信方法を紹介します。

##この記事では、

Vue 3.2 コンポーネントのさまざまな通信メソッドの基本的な使用法を説明し、単一ファイル コンポーネント を使用します。 。

ご存知のとおり、

Vue.js における非常に重要な知識ポイントはコンポーネント通信です。ビジネス クラスの開発であろうと、コンポーネント ライブラリの開発であろうと、それぞれに独自の知識があります。コミュニケーション方法。 [関連する推奨事項: vuejs ビデオ チュートリアル ]

この記事は次のような人に適しています:

• Vue 3 の基本的な知識がある読者

  。

コンポーネント ライブラリの開発を計画している読者。

• #この記事で取り上げるナレッジポイント:

#Props

• ##emits

expose / ref
非プロップ
v-model
slot
provide / inject
bus
getCurrentInstance
Vuex
Pinia

• ##mitt.js

• 簡単なコードを書きます上記のすべての知識ポイントのデモ。この記事の目的は、これらの方法が使用できることを誰にでも知ってもらうことであるため、すべての知識ポイントを掘り下げるわけではありません。
• 読者は、この記事に従ってコードを入力し、この記事に記載されているリンクに従ってさまざまな知識ポイントを掘り下げることをお勧めします。

コレクション (学習したもの) はあなた自身のものです。

Props

親コンポーネントが子コンポーネントに値を渡す (略語: 親から子)

Props Document

https:/ /v3.cn.vuejs.org/guide/component-props.html

親コンポーネント

// Parent.vue

<template>
  <!-- 使用子组件 -->
  <Child :msg="message" />
</template>

<script setup>
import Child from &#39;./components/Child.vue&#39; // 引入子组件

let message = &#39;雷猴&#39;
</script>

子コンポーネント

// Child.vue

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script setup>

const props = defineProps({
  msg: {
    type: String,
    default: &#39;&#39;
  }
})

console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props

</script>

defineProps

API は、

を宣言するために使用する必要があります。これには完全な推論があり、