1. 親コンポーネントが子コンポーネントに値を渡す(props)ステップ:
<div id="アプリ"> <!-- 1. v-bind を通じて子コンポーネントにデータを渡す --> <テスト v-bind:ss='名前'></テスト> </div> <スクリプト> var a = 新しい Vue({ el:'#app', データ:{ 名前:'bing', }, コンポーネント: テスト:{ props: ['ss'], // 2. 親コンポーネントから渡されたデータを受け取る template: "<p>{{ss}}</p>" } } }) </スクリプト> Props は親要素と子要素間の 2. サブコンポーネントは親コンポーネントに値を渡す($emit)子コンポーネントは ステップ:
<div id="アプリ"> <p>{{ 合計 }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <!-- ステップ 3 --> </div> <スクリプト> Vue.component('ボタンカウンター', { テンプレート: '<button v-on:click="increment">{{ counter }}</button>', // ステップ 1 データ: 関数 () { 戻る { カウンター: 'サブコンポーネントデータ' } }, メソッド: { 増分: 関数 () { this.$emit('increment', this.counter); // ステップ2 } } }); 新しいVue({ el: '#app', データ: { 合計: '親コンポーネントデータ:' }, メソッド: { incrementTotal: function (e) { // ステップ4 this.total = this.total + e[0] コンソールログ(e); } } }) </スクリプト> 3. ブラザーコンポーネント値伝送(EventBus)コンポーネント間のデータ通信を処理するために Vuex のようなライブラリが必要ない場合は、Vue のEventBus を使用して通信することを検討できます。 Vue では、すべてのコンポーネントが同じイベント センターを共有するのと同じように、 この方法は、$emit イベントの処理センター (イベント バス) として空の vue インスタンスを作成し、それを介してイベントをトリガーおよびリッスンし、親子、兄弟、世代間コンポーネントを含む任意のコンポーネント間の通信を簡単に実現します。詳細は以下の通りです。 1. 初期化(new Vue())まず、イベント バスを作成してエクスポートし、他のモジュールがそれを使用したりリッスンしたりできるようにする必要があります。 方法1:新しい // イベントバス.js 'vue' から Vue をインポートします エクスポート const EventBus = new Vue() 方法2:プロジェクトの // メイン.js Vue.prototype.$EventBus = new Vue() // 注意: この方法で初期化されたEventBusはグローバルイベントバスです これで 2. イベントの送信 ($emit())通信する必要がある 2 つの Vue ページ (A と B) があるとします。ページ A では、クリック イベントがボタンにバインドされ、ページ B に通知するメッセージが送信されます。 <!-- A.vue --> <テンプレート> <button @click="sendMsg()">-</button> </テンプレート> <スクリプト> 「../event-bus.js」から EventBus をインポートします。 エクスポートデフォルト{ メソッド: { 送信メッセージ() { EventBus.$emit("aMsg", 'ページ A からのメッセージ'); // データを外部に送信する} } }; </スクリプト> 3. イベントを受信する ($on())次に、ページ B でこのメッセージを受信する必要があります。 <!-- B.vue --> <テンプレート> <p>{{メッセージ}}</p> </テンプレート> <スクリプト> 「../event-bus.js」から EventBus をインポートします。 エクスポートデフォルト{ データ() { 戻る { メッセージ: '' } }, マウント() { EventBus.$on("aMsg", (msg) => { // A から送信されたメッセージを受信します this.msg = msg; }); } }; </スクリプト> 4. イベントリスナーを削除する前述のように、不適切に使用すると、EventBus は大惨事になる可能性があります。どのような「大惨事」なのでしょうか?誰もが知っているように、vue はシングルページ アプリケーションです。ページを更新すると、関連する EventBus が削除され、ビジネスが停止します。また、業務に繰り返し操作するページがある場合、監視時に何度も EventBus が起動されることになり、これも非常に大きな隠れた危険性となります。このとき、EventBusとプロジェクトの関係を適切に処理する必要があります。これは通常、vue ページが破棄されたときに EventBus イベント リスナーを削除するために使用されます。 イベント リスナーを削除する場合は、次のようにします。 「../event-bus.js」から EventBus をインポートします。 イベントバス.$off('aMsg', {})
4. ヴュークス複数人での共同開発やログイン状態のグローバルな維持管理が必要な中規模から大規模のシングルページアプリケーションを作成する場合は、状態管理に vuex を選択するのが最適です。 Vuex詳細説明ポータル Vueコンポーネントの通信方法の事例まとめの記事はこれで終わりです。より関連性の高いVueコンポーネントの通信方法まとめについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様、今後とも123WORDPRESS.COMをよろしくお願いいたします! 以下もご興味があるかもしれません:
|
>>: Apache Bench ストレステストツールの実装原理と使用状況分析
目次0x0 はじめに0x1 RBAC 実装0x2 クレームベースの承認0x3 統合 CASL 0x4...
HTML POST リクエストで a タグを使用する 2 つの例を次に示します。 1. ajaxを使...
目次概要予防1. 使用方法2. 実装手順予備実装コード効果: Geo共通設定上記の構成を追加した後の...
WeChatアプレットプロジェクトでは、開発モジュールに手書き署名機能が含まれ、WeChatアプレッ...
この記事では、アコーディオン効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...
今日、MySQL をインストールすると次のエラー メッセージが表示されます。 かなり長い時間ネットで...
特記事項: Swoole 拡張機能のみがインストールされ、サーバーはホストにインストールされません。...
1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...
概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...
CSS3 のボックス サイズ設定 (content-box と border-box) CSS3 の...
インターネット上には Linux サーバーを監視するためのツール、コンポーネント、プログラムが多数あ...
目次序文JSON.stringify の 6 つの機能特集1特集2特集3特集4特集5特集6手動で文字...
皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...
準備1. マスターとスレーブのデータベースのバージョンは一致している必要があります2. マスターデー...
多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...