ホームページ ウェブフロントエンド Vue.js vuejsで親子通信を設定する方法

vuejsで親子通信を設定する方法

Sep 06, 2021 pm 03:26 PM
vuejs 父子通信

vuejs で親子通信を設定する方法: 1. 親コンポーネントは props を使用して子コンポーネントにデータを渡します; 2. 子コンポーネントは「$emit」を通じて親コンポーネントにメッセージを送信します; 3 . ".sync" 糖衣構文を使用する; 4. "$attrs" と "$listeners" を使用する; 5. private と inject を使用する。

vuejsで親子通信を設定する方法

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

Vue には、親コンポーネントと子コンポーネントの間で次の通信メソッドがあります:

  • props

  • ## $emit -- コンポーネントのカプセル化に一般的に使用されます

  • .sync -- 糖衣構文

  • $attrs および $listeners -- コンポーネントのカプセル化に使用されます多数の

  • privideとinject -- 高次コンポーネント

以下にそれぞれ紹介します

#1、 props

これは日常の開発でよく使われます。簡単に言うと、props を介して子コンポーネントにデータを渡すことができます。水道管のように、親コンポーネントのデータが上から下に流れます。は、流れに逆らって流れることはできません。これは、Vue の設計導入における単一のデータ フローでもあります。

<div id="app">
  <child :content="message"></child>
</div>
// Js
let Child = Vue.extend({
  template: &#39;<h2>{{ content }}</h2>&#39;,
  props: {
    content: {
      type: String,
      default: () => { return &#39;from child&#39; }
    }
  }
})
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;from parent&#39;
  },
  components: {
    Child
  }
})
ログイン後にコピー

2. $emit

正式な導入では、現在のインスタンスでイベントをトリガーし、追加のパラメーターがリスナー コールバックに渡されます。

<div id="app">
  <my-button @greet="sayHi"></my-button>
</div>
let MyButton = Vue.extend({
  template: &#39;<button @click="triggerClick">click</button>&#39;,
  data () {
    return {
      greeting: &#39;vue.js!&#39;
    }
  },
  methods: {
    triggerClick () {
      this.$emit(&#39;greet&#39;, this.greeting)
    }
  }
})
new Vue({
  el: &#39;#app&#39;,
  components: {
    MyButton
  },
  methods: {
    sayHi (val) {
      alert(&#39;Hi, &#39; + val) // &#39;Hi, vue.js!&#39;
    }
  }
})
ログイン後にコピー

3. .sync 修飾子

は、vue1.x の双方向バインディング関数として存在していました。つまり、子コンポーネントは、次の値を変更できます。親コンポーネント 。一方向のデータ フローの設計概念に違反したため、vue2.x では削除されましたが、この .sync 修飾子は vue 2.3.0 以降で再導入されました。ただし、これはコンパイル時の糖衣構文としてのみ存在します。これは、親コンポーネントのプロパティを自動的に更新する v-on リスナーとして拡張されています。

場合によっては、プロップに対して「双方向バインディング」を実行する必要があるかもしれません。残念ながら、真の双方向バインディングでは、親コンポーネントにも子コンポーネントにも明らかな変更源がなくても、子コンポーネントが親コンポーネントを変更できるため、メンテナンスの問題が発生します。

構文シュガーは次の形式で記述されます

<text-document
    v-bind:title="doc.title"
    v-on:update:title="doc.title = $event">
</text-document>
ログイン後にコピー

したがって、.sync 構文シュガーを使用して次の形式に短縮できます

<text-document v-bind:title.sync="doc.title"></text-document>
ログイン後にコピー

したがって、2 つを実現する方法は次のとおりです。サブコンポーネントの変更などのウェイ バインディング。コンポーネント テキスト ボックスの値も親コンポーネントの値を変更します。コードは次のとおりです。

<div id="app">
  <login :name.sync="userName"></login> {{ userName }}
</div>

let Login = Vue.extend({
  template: `
    <div class="input-group">
      <label>姓名:</label>
      <input v-model="text">
    </div>
  `,
  props: [&#39;name&#39;],
  data () {
    return {
      text: &#39;&#39;
    }
  },
  watch: {
    text (newVal) {
      this.$emit(&#39;update:name&#39;, newVal)
    }
  }
})

new Vue({
  el: &#39;#app&#39;,
  data: {
    userName: &#39;&#39;
  },
  components: {
    Login
  }
})
ログイン後にコピー

コードには 1 つの文のみがあります:

this.$emit(&#39;update:name&#39;, newVal)
ログイン後にコピー

正式な構文は次のとおりです: update:myPropName ここで、myPropName は更新されるプロパティを表します。もちろん、.sync 構文シュガーを使用せず、上記の .$emit を使用する場合でも、同じ効果を達成できます。

#4、$attrs および $listeners

公式 Web サイトの $attrs のサポート 説明は次のとおりです。

親スコープ内の props として認識 (および取得) されないプロパティ バインディング (クラスとスタイルを除く) が含まれています。コンポーネントが props を宣言していない場合、すべての親スコープ バインディング (クラスとスタイルを除く) がここに含まれ、内部コンポーネントは v-bind="$attrs" 経由で渡すことができます。これは高レベルのコンポーネントを作成するときに非常に便利です。

公式 Web サイトでは、$listeners について次のように説明されています。

親スコープに v-on イベント リスナーが含まれます (.native 修飾子なし)。 v-on="$listeners" を介して内部コンポーネントに渡すことができます。これは、より高いレベルのコンポーネントを作成するときに非常に役立ちます。

$attrs 属性と $listeners 属性は 2 つのストレージ ボックスに似ています。1 つは属性の保存を担当し、もう 1 つはイベントの保存を担当します。どちらもデータをオブジェクトの形式で保存します。

<div id="app">
  <child
    :foo="foo"
    :bar="bar"
    @one.native="triggerOne"
    @two="triggerTwo">
  </child>
</div>
ログイン後にコピー
let Child = Vue.extend({
  template: &#39;<h2>{{ foo }}</h2>&#39;,
  props: [&#39;foo&#39;],
  created () {
    console.log(this.$attrs, this.$listeners)
    // -> {bar: "parent bar"}
    // -> {two: fn}
    // 这里我们访问父组件中的 `triggerTwo` 方法
    this.$listeners.two()
    // -> &#39;two&#39;
  }
})

new Vue({
  el: &#39;#app&#39;,
  data: {
    foo: &#39;parent foo&#39;,
    bar: &#39;parent bar&#39;
  },
  components: {
    Child
  },
  methods: {
    triggerOne () {
      alert(&#39;one&#39;)
    },
    triggerTwo () {
      alert(&#39;two&#39;)
    }
  }
})
ログイン後にコピー

ご覧のとおり、$attrs と $listeners を介してデータを渡し、必要に応じて呼び出して処理することが非常に便利です。もちろん、v-on="$listeners" を通じてレベルごとに渡すこともでき、子孫は無限になります。

5、プライベートとインジェクト

provide / inject の公式の説明を見てみましょう:

Provide と inject は主にハイエンドです。プラグイン/コンポーネント ライブラリは使用例を提供します。アプリケーション コード内で直接使用することはお勧めできません。また、コンポーネント階層がどれほど深くても、祖先コンポーネントがそのすべての子孫に依存関係を注入できるようにするには、このオプションのペアを一緒に使用する必要があります。このオプションは、上流と下流の関係が確立された時点から常に有効になります。

<div id="app">

  <son></son>

</div>

let Son = Vue.extend({
  template: &#39;<h2>son</h2>&#39;,
  inject: {
    house: {
      default: &#39;没房&#39;
    },
    car: {
      default: &#39;没车&#39;
    },
    money: {
      // 长大工作了虽然有点钱
      // 仅供生活费,需要向父母要
      default: &#39;¥4500&#39;
    }
  },
  created () {
    console.log(this.house, this.car, this.money)
    // -> &#39;房子&#39;, &#39;车子&#39;, &#39;¥10000&#39;
  }
})

new Vue({
  el: &#39;#app&#39;,
  provide: {
    house: &#39;房子&#39;,
    car: &#39;车子&#39;,
    money: &#39;¥10000&#39;
  },
  components: {
    Son
  }
})
ログイン後にコピー

その他の例については、このメソッドを多数使用する element-ui ソース コードを参照してください。

関連する推奨事項:「

vue.js チュートリアル

」 「

以上がvuejsで親子通信を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vue.js と Kotlin 言語を使用して Android アプリケーションを開発するためのヒント Vue.js と Kotlin 言語を使用して Android アプリケーションを開発するためのヒント Jul 31, 2023 pm 02:17 PM

Vue.js と Kotlin 言語を使用して Android アプリケーションを開発するためのヒント モバイル アプリケーションの人気とユーザー ニーズの継続的な成長により、Android アプリケーションの開発は開発者からますます注目を集めています。 Android アプリを開発する場合、適切なテクノロジー スタックを選択することが重要です。近年、Vue.js 言語と Kotlin 言語が Android アプリケーション開発の選択肢として徐々に人気になってきています。この記事では、Vue.js と Kotlin 言語を使用して Android アプリケーションを開発するためのテクニックをいくつか紹介し、対応するコード例を示します。 1. 最初に開発環境をセットアップする

Vue.js と Python を使用してデータ視覚化アプリケーションを開発するためのヒント Vue.js と Python を使用してデータ視覚化アプリケーションを開発するためのヒント Jul 31, 2023 pm 07:53 PM

Vue.js と Python を使用してデータ視覚化アプリケーションを開発するためのヒント はじめに: ビッグ データ時代の到来により、データ視覚化は重要なソリューションになりました。データ視覚化アプリケーションの開発では、Vue.js と Python を組み合わせることで、柔軟性と強力な機能を提供できます。この記事では、Vue.js と Python を使用してデータ視覚化アプリケーションを開発するためのヒントをいくつか紹介し、対応するコード例を添付します。 1. Vue.js の概要 Vue.js は軽量の JavaScript です。

Vue.js と Objective-C の統合、信頼性の高い Mac アプリを開発するためのヒントとアドバイス Vue.js と Objective-C の統合、信頼性の高い Mac アプリを開発するためのヒントとアドバイス Jul 30, 2023 pm 03:01 PM

Vue.js と Objective-C 言語の統合、信頼性の高い Mac アプリケーションを開発するためのヒントと提案 近年、フロントエンド開発における Vue.js の人気と Mac アプリケーション開発における Objective-C の安定性により、開発者はこの 2 つを組み合わせて、より信頼性が高く効率的な Mac アプリケーションを開発しようとしています。この記事では、開発者が Vue.js と Objective-C を正しく統合し、高品質の Mac アプリケーションを開発するのに役立ついくつかのヒントと提案を紹介します。 1つ

Vue.js と Lua 言語の統合、ゲーム開発用のフロントエンド エンジン構築におけるベスト プラクティスと経験の共有 Vue.js と Lua 言語の統合、ゲーム開発用のフロントエンド エンジン構築におけるベスト プラクティスと経験の共有 Aug 01, 2023 pm 08:14 PM

Vue.js と Lua 言語の統合、ゲーム開発用のフロントエンド エンジンを構築するためのベスト プラクティスと経験の共有 はじめに: ゲーム開発の継続的な開発に伴い、ゲーム フロントエンド エンジンの選択は重要な決定となっています。これらの選択肢の中で、Vue.js フレームワークと Lua 言語が多くの開発者の注目を集めています。人気のフロントエンド フレームワークとして、Vue.js は豊富なエコシステムと便利な開発方法を備えていますが、Lua 言語は軽量で効率的なパフォーマンスのため、ゲーム開発で広く使用されています。この記事では、その方法について説明します。

PHP と Vue.js を使用してグラフにデータのフィルタリングと並べ替え機能を実装する方法 PHP と Vue.js を使用してグラフにデータのフィルタリングと並べ替え機能を実装する方法 Aug 27, 2023 am 11:51 AM

PHP と Vue.js を使用してグラフにデータのフィルタリングと並べ替え機能を実装する方法 Web 開発では、グラフはデータを表示する非常に一般的な方法です。 PHP と Vue.js を使用すると、グラフ上にデータのフィルタリングおよび並べ替え機能を簡単に実装でき、ユーザーがグラフ上のデータの表示をカスタマイズできるようになり、データの視覚化とユーザー エクスペリエンスが向上します。まず、グラフで使用するデータのセットを準備する必要があります。名前、年齢、学年の 3 つの列を含むデータ テーブルがあるとします。データは次のとおりです: 名前、年齢、学年 Zhang San 1890 Li

Vue.js と Dart 言語の統合、クールなモバイル アプリケーション UI インターフェイスを構築するための実践的および開発スキル Vue.js と Dart 言語の統合、クールなモバイル アプリケーション UI インターフェイスを構築するための実践的および開発スキル Aug 02, 2023 pm 03:33 PM

Vue.js と Dart 言語の統合、クールなモバイル アプリケーション UI インターフェイスを構築するための実践と開発スキル はじめに: モバイル アプリケーション開発において、ユーザー インターフェイス (UI) の設計と実装は非常に重要な部分です。クールなモバイル アプリケーション インターフェイスを実現するために、Vue.js を Dart 言語と統合し、Vue.js の強力なデータ バインディング機能とコンポーネント化機能、および Dart 言語の豊富なモバイル アプリケーション開発ライブラリを使用して、素晴らしいモバイル アプリケーションを構築できます。 UIインターフェイス。この記事ではその方法を説明します

Vue.js と Perl 言語を使用して効率的な Web クローラーとデータ スクレイピング ツールを開発します。 Vue.js と Perl 言語を使用して効率的な Web クローラーとデータ スクレイピング ツールを開発します。 Jul 31, 2023 pm 06:43 PM

Vue.js と Perl 言語を使用して、効率的な Web クローラーとデータ スクレイピング ツールを開発します。近年、インターネットの急速な発展とデータの重要性の増大に伴い、Web クローラーとデータ スクレイピング ツールの需要も増加しています。この文脈では、Vue.js と Perl 言語を組み合わせて効率的な Web クローラーとデータ スクレイピング ツールを開発することは良い選択です。この記事では、Vue.js と Perl 言語を使用してこのようなツールを開発する方法を紹介し、対応するコード例を添付します。 1. Vue.js と Perl 言語の概要

Vue を使用して QQ のようなチャット バブル効果を実装する方法 Vue を使用して QQ のようなチャット バブル効果を実装する方法 Sep 20, 2023 pm 02:27 PM

Vue を使用して QQ のようなチャット バブル効果を実装する方法 今日のソーシャル時代において、チャット機能はモバイル アプリケーションや Web アプリケーションの中核機能の 1 つとなっています。チャット インターフェイスで最も一般的な要素の 1 つはチャット バブルです。これにより、送信者のメッセージと受信者のメッセージを明確に区別でき、メッセージの読みやすさが効果的に向上します。この記事では、Vue を使用して QQ のようなチャット バブル効果を実装する方法を紹介し、具体的なコード例を示します。まず、チャット バブルを表す Vue コンポーネントを作成する必要があります。コンポーネントは 2 つの主要な部分で構成されます

See all articles