Vue コンポーネント (Vuex を含む) 間の値の転送に関する簡単な説明

Vue コンポーネント (Vuex を含む) 間の値の転送に関する簡単な説明

Vuex を使用せずにコンポーネント間で値を渡す方法は、親から子、または兄弟コンポーネントを介して行われます。

父から息子へ:

父親コンポーネント:

<テンプレート>
    <div>
        <HELLOWORLD :needData="コンテンツ"></HELLOWORLD>
    </div>
</テンプレート>

<スクリプト>
'../components/HelloWorld.vue' から HELLOWORLD をインポートします。
エクスポートデフォルト{
    コンポーネント:{
        こんにちは世界
    },
    データ(){
        戻る {
            コンテンツ:"コンテンツ"
        }
    }
}
</スクリプト>

<style lang="less" スコープ>

</スタイル>

SonComponent (サブコンポーネント名は HELLOWORLD):

<テンプレート>
    <div>
        <h1>ハローワールド</h1>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    プロパティ:["needData"],
    データ(){
        戻る {
            H:this.needData、
        }
    },
    マウントされた(){
        コンソールにログ出力します。
    }
}
</スクリプト>

<style lang="less" スコープ>

</スタイル>

ここに画像の説明を挿入

息子から父へ:

父親コンポーネント:

<テンプレート>
    <div>
        <HELLOWORLD @sendData="getData"></HELLOWORLD>
    </div>
</テンプレート>

<スクリプト>
'../components/HelloWorld.vue' から HELLOWORLD をインポートします。
エクスポートデフォルト{
    コンポーネント:{
        こんにちは世界
    },
    データ(){
        戻る {
            
        }
    },
    方法:{
        getData(sonData){
            console.log("データ=>",sonData);
        },
    }
}
</スクリプト>

<style lang="less" スコープ>

</スタイル>

息子コンポーネント:

<テンプレート>
    <div>
        <h1>ハローワールド</h1>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    データ(){
        戻る {
            コンテンツ:"コンテンツ"
        }
    },
    マウントされた(){
        this.$emit("sendData",this.content);
    }
}
</スクリプト>

<style lang="less" スコープ>

</スタイル>

効果画像:

ここに画像の説明を挿入

実際、親コンポーネントと子コンポーネント間でデータを転送するには、親コンポーネントの関数または子コンポーネントの関数を呼び出すことによってデータを転送することもできます。 Vueでは、子コンポーネントが親コンポーネントの関数を呼び出す。

https://www.jb51.net/article/134732.htm

Vue親コンポーネントは子コンポーネントの関数を呼び出す

https://www.jb51.net/article/219793.htm

Vuex は Vue フレームワークの不可欠な部分です。

Vuex は、複数のコンポーネント間の通信が必要な場合に特に重要です。たとえば、親コンポーネントでデータが生成されるが、そのデータをサブコンポーネントのサブコンポーネントで使用する必要がある場合、Vuex を使用して管理できます。また、兄弟コンポーネント間で値を渡す必要がある場合にも、Vuex を使用できます。

Vue の store.js には 5 つのプロパティがあります。
これらは、状態、ミューテーション、アクション、ゲッター、およびモジュールです。

構造は次のとおりです。

a={とする
  州: {
  	名前:"モジュールA"
  },
  //ミューテーションは特に状態属性のデータを変更するために使用されます。ミューテーション: {
  	setFun(状態、項目){
		状態名=アイテム;
	}
  }
}

デフォルトの新しいVuex.Storeをエクスポートします({
  //state はデータの保存専用ですstate: {
  	数:100,
  	コンポーネントを使用する:{
		名前:"A",
	},
	useBcomponent:"コンテンツ",
  },
  //ミューテーションは特に状態属性のデータを変更するために使用されます。ミューテーション: {
  	setStateFun(状態、項目){
		state.useBcomponent="Bコンポーネント";
	}
  },
  アクション: {
  	httpGetData(ストア、アイテム){
		タイムアウトを設定します(()=>{
			console.log(アイテム);
			store.commit("setStateFun",アイテム);
		},3000)
	}
  },
  ゲッター:{
  //ゲッター内の関数を呼び出すときにパラメータは渡されません getterFun1(state){
		state.num++ を返す
	}
  //ゲッターで関数を呼び出す場合、入力パラメータがあります gettterFun2(state){
		関数を返す(val){
			state.num+=val を返します。
		}
	}
  },
  モジュール:
  	モジュールA:a
  }
});
}

状態内のデータは、さまざまなコンポーネントからアクセスできます。

状態データを取得します:

this.$store.state.state オブジェクト内のデータ。
たとえば、let val = this.$store.state.num;

状態データを変更するには、Vuex の変異オブジェクト内の関数を呼び出すだけです。

this.$store.commit("関数名","データ");
たとえば、 this.$store.commit("setStateFun","testSetItem");

Vuex でリクエストを行うために使用されるアクション オブジェクト

this.$store.dispatch("関数名","データ");
たとえば、 this.$store.dispatch("httpGetData","testItem");

Vueの計算プロパティに似たゲッターオブジェクト

this.$store.getters.関数名;
たとえば、パラメータが入力されていない場合は this.$store.getters.getterFun1;
//入力パラメータがある場合 this.$store.getters.getterFun2(123);

モジュール オブジェクトは、使用する必要があるストア モジュールを分離することに似ています。各モジュール オブジェクトはモジュールに対応します。

//モジュール オブジェクトの状態データを取得します。this.$store.state.modules オブジェクト名.state 値;
たとえば this.$store.state.ModuleA.name
//モジュール オブジェクトのミューテーション関数を使用します。this.$store.commit("関数名","入力パラメータ データ");
たとえば、 this.$store.commit("setFun","itemabc");
//ここで注意すべき点は、モジュールモジュールと外部(モジュールオブジェクトモジュールではない)のミューテーションオブジェクトに同じ名前の関数がある場合、呼び出されたときに同じ名前の両方の関数が実行されるということです。

これで、Vue コンポーネント (Vuex を含む) 間の値の転送について簡単に説明したこの記事は終了です。Vue コンポーネント間の値の転送に関する詳細なコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueのコンポーネント間で通信して値を渡すいくつかの方法の詳細な説明
  • Vue コンポーネント間で値を渡す方法をどうやって知っていますか?
  • Vue3 における非親子コンポーネントの値転送の詳細な説明
  • Vue3 における親コンポーネントと子コンポーネント間の値の転送の詳細な説明
  • Vue の親子コンポーネントの値転送と一方向データフローの問題の詳細な説明
  • 非常にシンプルでわかりやすいvueコンポーネントの値転送

<<:  Linux (CentOS7) で RPM を使用して MySQL 8.0.11 をインストールするチュートリアル

>>:  MySQL における UNION と UNION ALL の基本的な使い方

推薦する

アバター変更機能を実装するJavaScript

この記事では、アバター変更機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...

Vueは下部のポップアップウィンドウで複数選択を実装します

この記事の例では、下部のポップアップウィンドウで複数選択を実装するためのVueの具体的なコードを共有...

TeamCenter12 にログインする際の 404/503 問題の解決方法

TeamCenter12はアカウントのパスワードを入力し、ログインをクリックすると、404または50...

Vue で SuperMap を使用する練習

目次序文関連資料Vue プロジェクトが 2 次元ハイパーグラフを導入ハイパーグラフ 2D ケース引用...

MySQL の低速クエリの最適化: 理論と実践からの制限の利点

多くの場合、クエリの結果は最大で 1 つのデータ レコードになることが予想されます。この場合、制限 ...

Vue におけるキープアライブ マルチレベル ルーティング キャッシュの問題

目次1. 問題の説明2. 原因分析3. 解決策4. 処理1. 問題の説明調整センターでは、最後の 2...

CSS で overflow-y: visible; が機能しない理由の分析と解決

シナリオ最近の要件は、モバイル デバイス用の h5 ページです。これには、選択可能なカードの行が必要...

MySQLチュートリアルDMLデータ操作言語の例の詳細な説明

目次1. データ操作言語 (DML) 2. データを追加する(挿入) 3. 既存のテーブルをコピーし...

Dockerコミットの使い方の詳しい説明

場合によっては、ベースイメージに特定の依存関係をインストールする必要があります。Dockerfile...

4種類のMySQL接続とマルチテーブルクエリの詳細な説明

目次MySQL 内部結合、左結合、右結合、外部結合、複数テーブルクエリビルド環境: 1. 内なる慈恩...

HTML でカスタム画像を使用してチェックボックスを表示する方法

チェックボックスの使用を実装するために画像を使用する必要がある場合は、それを使用して実装できます。実...

MySQLでデータベースのインストールパスを表示する方法

mysql コマンドを使用して、mysql のインストール パスを表示できます。 # 次の 2 つの...

Dockerはプライベートライブラリイメージを完全に削除します

まず、インターネット上の一般的な慣行を見てみましょうデフォルトでは、プライベート ライブラリはイメー...

MySQL 5.7 MGR シングルマスター決定マスターノード方式の詳細説明

当銀行のMGRは年末に開始されます。公式文書を読んだり、毎日テストを受けたりしなければなりません。毎...

MySQLからデータをインポートする際の不正なフォーマット、インポートの遅延、データ損失などの問題を迅速に解決します。

遅い問題を完全に解決したい場合は、MySQL を MySQL 8.0 にアップグレードすることをお勧...