Vue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)

Vueで親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?以下の記事では、父から息子、息子から父への方法を紹介していますので、ぜひ参考にしてください。

#1. 親コンポーネントを子コンポーネントに渡す

##親コンポーネントは、props 属性を通じて子コンポーネントに渡されます。[関連する推奨事項:
• vuejs ビデオ チュートリアル、Web フロントエンド開発]
子コンポーネントコンポーネントが親コンポーネントに渡される: $emit を通じてイベントをトリガーする;
• 
  

props
コンポーネント間の通信を完了するには

⭐⭐では、

とは何ですか? ?
関数: 親コンポーネントによって渡されたプロパティを受け入れます

• Props
は、コンポーネントにいくつかのカスタム属性を登録できることを意味します;
• 親コンポーネントはこれらの属性 (属性) に値を割り当て、子コンポーネントは属性の名前を通じて対応する値を取得します;
• 単一ファイル コンポーネントでは
スクリプト セットアップ#を使用します##,

defineProps()マクロを使用して次を宣言できます:

<script> const props = defineProps([&#39;foo&#39;]) console.log(props.foo) </script>

script setupのコンポーネントでは、props

propを宣言できます:

export default { props: ['foo'], setup(props) { // setup() 接收 props 作为第一个参数 console.log(props.foo) } }

App.vue

• ログイン後にコピー
  # で定義されたコンポーネントと属性を使用します。 #showInfo.vue
Subcomponent

• export default { props:{ name :{ type:String, default:"我是默认值name" }, height:{ type:Number, default:2 } } }

  ログイン後にコピー

  Also:それでは、どのような型が考えられるのでしょうか?

  #文字列

ブール値

配列
• オブジェクト
• 日付
• Function
• Symbol
• 2) オブジェクト型
• は
object

の形式で宣言されます。 props(これは非常に一般的に使用されます)

script setup

defineProps({ title: String, likes: Number })

export default { props: { title: String, likes: Number } }

子コンポーネントは親コンポーネントに渡され、$ を通じてイベントがトリガーされます放出# 子コンポーネントは親コンポーネントにコンテンツを渡します:

子コンポーネントで何らかのイベントが発生すると、コンポーネントの場合、親コンポーネントはコンテンツを切り替える必要があります;

子コンポーネントに親コンポーネントに渡したいコンテンツがある場合;

$emit("add", count )

• ⭐⭐
カウンターケースを考えてください。

サブコンポーネントは、場合によってトリガーされるイベントの名前で定義されます

親コンポーネントで、監視するイベントの名前を渡しますv-on (構文シュガー @) の形式で、対応するメソッドにバインドします。
#最後に、子コンポーネントでイベントが発生すると、イベント名に従って対応するイベントがトリガーされます

• 1) 親コンポーネント
App.vue
親コンポーネントは子コンポーネントの加算または減算イベントをリッスンし、親コンポーネントは子コンポーネントの加算イベントまたは減算イベントをリッスンします。子コンポーネントを介したイベント
• #親コンポーネントは、子コンポーネントによって発行されたカスタム イベントをリッスンし、対応する操作を実行します

2) サブコンポーネント 1AddCounter .vue

• ここで定義されているのはカウンターの加算演算です
サブコンポーネントイベントがトリガーされた後、これを通して $emit イベントを発行する方法

• ログイン後にコピー
3) サブコンポーネント 2

ここで定義されているのはカウンターのデクリメント操作です

(学習ビデオの共有:プログラミングの基本ビデオ

以上がVue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。