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ツール

ホットツール

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、