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

ホームページ

ウェブフロントエンド

Vue.js

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

青灯夜游

Feb 28, 2022 pm 07:40 PM

vue3コンポーネント通信

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

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

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

ご存知のとおり、

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

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

Vue 3 の基本的な知識がある読者
。
#この記事で取り上げるナレッジポイント:

#Props

##emits
##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 は、

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

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。