Vue 父子価値移転、兄弟価値移転、子父価値移転の詳細な説明

Vue 父子価値移転、兄弟価値移転、子父価値移転の詳細な説明

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

1. 親コンポーネント.vue

// 親コンポーネント内の <template>
    <div>
        <子 ref="子" :title="値"/>
    </div>
</テンプレート>    
<スクリプト>
エクスポートデフォルト{
    データ() {
    	戻る {
    		値: 'hello world!'
    	}
    }
}
</スクリプト>

2. サブコンポーネント.vue

// 親コンポーネント内の <template>
    <div>
       <span>{{タイトル}}</span>    
    </div>
</テンプレート>    
<スクリプト>
エクスポートデフォルト{
  小道具: {
    タイトル:
      	タイプ: 文字列、
      	デフォルト: ''
    }
  }
}
</スクリプト>

//タイトルの値は「hello world!」です。

2. ミドルウェアバスを介して兄弟コンポーネント間で値を転送することもできます

$emit 値の受け渡し

$on 引き継ぐ

$off転送イベントを削除します

1.component.js

this.$bus.$emit("フラグ",true)

2.B コンポーネント.js

マウント() {
    this.$bus.$off('フラグ')
    this.$bus.$on('フラグ', データ=> {
      this.flag = データ
    })
  }

3. サブコンポーネントは親コンポーネントに値を渡す

1. 親component.js

<テンプレート>
    <div>
        <子 ref="子" @getTitle="getTitle"/>
    </div>
</テンプレート>  
<スクリプト>
'./components/Child' から Child をインポートします。
エクスポートデフォルト{
  コンポーネント:
  	子供 
  },
  データ() {
    戻る {
    }
  },
  方法:{
  	getTitle(データ){
		コンソール.log(データ)
	}
  }
}
</スクリプト>

印刷結果はhello xulitingです

2. サブコンポーネント.js

<テンプレート>
    <div>
       <span>{{タイトル}}</span> 
    </div>
</テンプレート>    
<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
    タイトル: 「hello xuliting」
    }
  },
  マウントされた(){
    this.getFun()
  },
  方法:{
    getFun(){
     this.$emit("getTiltle",this.title)
    }
  }
}
</スクリプト>

要約:

この問題は、コンポーネント間でメソッドを転送することによっても解決できます。たとえば、親コンポーネントは A で、子コンポーネントは B と C です。

親コンポーネント A が子コンポーネント B を呼び出すメソッドは aFun として定義され、aFun は子コンポーネント C に渡されます。

これは親コンポーネントのコンポーネントCに渡されるメソッドです

<C :a-fun="aFun" />

参照はコンポーネントCのpropsを通じて行われます

小道具: {
    楽しい: {
      タイプ: 関数、
      デフォルト: () => function() {}
    }
  }

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3 の父子値転送に関する簡単な説明
  • Vue の親子コンポーネントの値転送と一方向データフローの問題の詳細な説明
  • Vue 親子コンポーネントの相互値の転送と呼び出し
  • Vueの7つの値転送メソッドの詳細な説明
  • Vue の親子コンポーネントの値転送の落とし穴
  • vueの子コンポーネントと親コンポーネント間で値を渡す例

<<:  Dockerfile における VOLUME と docker -v の違い

>>:  Web ページは何ピクセルで設計すればよいでしょうか?

推薦する

JDBC-idea で mysql をインポートして java jar パッケージに接続する (mac)

序文1. この記事ではMySQL 8.0バージョンを使用していますバージョン5.0と比較すると、パッ...

CocosCreator 学習モジュールスクリプト

Cocos Creator モジュラースクリプトCocos Creator を使用すると、コードを複...

Win10 64ビットMySQL8.0のダウンロードとインストールのチュートリアル図

公式サイトから MySQL をダウンロードしてインストールし、クライアントにログインするにはどうすれ...

フォーム内のどの隠し属性をフォームとともに送信できるか

フォーム内の visibility=hidden および display=none のフォーム要素は...

組み込み Linux で QT アプリケーションを再起動する簡単な方法 (QT4.8 qws ベース)

アプリケーション ソフトウェアには通常、次のようなビジネス要件があります。新しいバージョンの APP...

MySQL 8.0 のインストール中に発生した 3 つの小さなエラーの概要

序文これまで当社ではMySQLの5.7シリーズを使用していましたが、バージョン8.0のリリースに合わ...

Docker+Jenkinsによる自動デプロイの実現方法

Code Cloud を使用して Git コード ストレージ ウェアハウスを構築するhttps://...

jQueryは、マウスをドラッグしてdivの位置とサイズを変更する方法を実装しています。

Windows フォームと同様の効果を得るには、中央をドラッグして div の位置を変更し、端をド...

CSS で要素を垂直方向に中央揃えする 7 つの方法

【1】中央の要素の幅と高さを知る絶対値 + 負のマージンコードの実装 .wrapBox5{ 幅: 3...

reactにおけるstateの略語の詳細な説明

序文国家とは何か私たちは皆、React はステート マシンであると言います。それはどのように反映され...

Linuxのip netnsコマンドを使用してネットワークポートを分離し、IPアドレスを設定します。

1. 分離マーカーを追加します。 ip netns add fd 2. 指定されたネットワーク カ...

CSS3はブラウザのスクロールバーのスタイルを変更します

注意: この方法は、Webkit ベースのブラウザにのみ適用されます。ブラウザのスクロールバーが広す...

Mysql 主キー UUID と自動増分主キーの違いと利点と欠点

導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...

ドロップダウンメニューを表示または非表示にするJavaScript

この記事では、ドロップダウンメニューを表示および非表示にするJavaScriptの具体的なコードを参...

Linux crontab コマンドの使用

1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...