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 ページは何ピクセルで設計すればよいでしょうか?

推薦する

Docker 大規模プロジェクトのコンテナ化変革

仮想化とコンテナ化は、クラウドベースのプロジェクトでは避けられない 2 つの問題です。仮想化は純粋な...

CentOS 6 または CentOS 7 でディスク領域をクリアする方法

以下は、CentOS 6 または CentOS 7 サーバーのディスク領域をクリアするための簡単なコ...

nginxで複数のサーバーを簡単に構成する方法

1: nginx のインストール方法については詳しく説明しません。Baidu で検索してください。 ...

Docker に Solr 8.6.2 をインストールし、中国語の単語セグメンターを構成する方法

1. 環境バージョンDocker バージョン 19.03.12セントロス7ソル8.6.2 2. Do...

Vue でよく使われる命令 v-if と v-show の違いを簡単に分析します。

目次序文1.v-ショー2.v-if 3. v-showとv-ifの違い1. 原則の違い2. アプリケ...

VMware仮想マシンにdeepin20をインストールする最も完全で詳細なプロセス

仮想マシンソフトウェア: VMware Workstationイメージ: deepin-deskto...

CSS3で実装されたスライドメニュー

結果:実装コード: <!DOCTYPE html><html class=&quo...

HTMLのリストタグを数える

1. <dl>はリストを定義し、<dt>はリスト内の項目を定義し、<d...

CSSとHTMLを組み合わせる4つの方法

(1)各HTMLタグには属性スタイルがあり、CSSとHTMLを組み合わせている。 <div s...

MySQLバックアップとリカバリの実践に関する詳細な説明

1. mysqlbackup の紹介mysqlbackup は、MySQL Enterprise B...

Vueはタブ切り替えの虫眼鏡効果を実装します

この記事では、タブ切り替えの虫眼鏡効果を実現するためのVueの具体的なコードを例として紹介します。具...

vue+django でファイルをダウンロードする例

目次1. 概要2. Django プロジェクト3. Vueプロジェクト1. 概要プロジェクトで、ダウ...

MySQLデータベースを別のマシンに移行する方法の詳細な説明

1. まず、移行サーバー上のデータ ファイルを見つけます。MySQL 5.7 とデフォルトのインスト...

v-html レンダリング コンポーネントの問題

以前 HTML を解析したことがあるので、今日は Vue ドラッグ アンド ドロップを使用して、Ku...