vuejsで親子通信を設定する方法
vuejs で親子通信を設定する方法: 1. 親コンポーネントは props を使用して子コンポーネントにデータを渡します; 2. 子コンポーネントは「$emit」を通じて親コンポーネントにメッセージを送信します; 3 . ".sync" 糖衣構文を使用する; 4. "$attrs" と "$listeners" を使用する; 5. private と inject を使用する。
このチュートリアルの動作環境: 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: '<h2>{{ content }}</h2>', props: { content: { type: String, default: () => { return 'from child' } } } }) new Vue({ el: '#app', data: { message: 'from parent' }, components: { Child } })
2. $emit
正式な導入では、現在のインスタンスでイベントをトリガーし、追加のパラメーターがリスナー コールバックに渡されます。<div id="app"> <my-button @greet="sayHi"></my-button> </div> let MyButton = Vue.extend({ template: '<button @click="triggerClick">click</button>', data () { return { greeting: 'vue.js!' } }, methods: { triggerClick () { this.$emit('greet', this.greeting) } } }) new Vue({ el: '#app', components: { MyButton }, methods: { sayHi (val) { alert('Hi, ' + val) // 'Hi, vue.js!' } } })
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>
<text-document v-bind:title.sync="doc.title"></text-document>
<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: ['name'], data () { return { text: '' } }, watch: { text (newVal) { this.$emit('update:name', newVal) } } }) new Vue({ el: '#app', data: { userName: '' }, components: { Login } })
this.$emit('update:name', newVal)
公式 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: '<h2>{{ foo }}</h2>', props: ['foo'], created () { console.log(this.$attrs, this.$listeners) // -> {bar: "parent bar"} // -> {two: fn} // 这里我们访问父组件中的 `triggerTwo` 方法 this.$listeners.two() // -> 'two' } }) new Vue({ el: '#app', data: { foo: 'parent foo', bar: 'parent bar' }, components: { Child }, methods: { triggerOne () { alert('one') }, triggerTwo () { alert('two') } } })
ご覧のとおり、$attrs と $listeners を介してデータを渡し、必要に応じて呼び出して処理することが非常に便利です。もちろん、v-on="$listeners" を通じてレベルごとに渡すこともでき、子孫は無限になります。
5、プライベートとインジェクトprovide / inject の公式の説明を見てみましょう:
Provide と inject は主にハイエンドです。プラグイン/コンポーネント ライブラリは使用例を提供します。アプリケーション コード内で直接使用することはお勧めできません。また、コンポーネント階層がどれほど深くても、祖先コンポーネントがそのすべての子孫に依存関係を注入できるようにするには、このオプションのペアを一緒に使用する必要があります。このオプションは、上流と下流の関係が確立された時点から常に有効になります。
<div id="app"> <son></son> </div> let Son = Vue.extend({ template: '<h2>son</h2>', inject: { house: { default: '没房' }, car: { default: '没车' }, money: { // 长大工作了虽然有点钱 // 仅供生活费,需要向父母要 default: '¥4500' } }, created () { console.log(this.house, this.car, this.money) // -> '房子', '车子', '¥10000' } }) new Vue({ el: '#app', provide: { house: '房子', car: '车子', money: '¥10000' }, components: { Son } })
その他の例については、このメソッドを多数使用する element-ui ソース コードを参照してください。
関連する推奨事項:「
vue.js チュートリアル以上がvuejsで親子通信を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック









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

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

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

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

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

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

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

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