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 フレームワークの不可欠な部分です。
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux (CentOS7) で RPM を使用して MySQL 8.0.11 をインストールするチュートリアル
>>: MySQL における UNION と UNION ALL の基本的な使い方
この記事では、アバター変更機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...
この記事の例では、下部のポップアップウィンドウで複数選択を実装するためのVueの具体的なコードを共有...
TeamCenter12はアカウントのパスワードを入力し、ログインをクリックすると、404または50...
目次序文関連資料Vue プロジェクトが 2 次元ハイパーグラフを導入ハイパーグラフ 2D ケース引用...
多くの場合、クエリの結果は最大で 1 つのデータ レコードになることが予想されます。この場合、制限 ...
目次1. 問題の説明2. 原因分析3. 解決策4. 処理1. 問題の説明調整センターでは、最後の 2...
シナリオ最近の要件は、モバイル デバイス用の h5 ページです。これには、選択可能なカードの行が必要...
目次1. データ操作言語 (DML) 2. データを追加する(挿入) 3. 既存のテーブルをコピーし...
場合によっては、ベースイメージに特定の依存関係をインストールする必要があります。Dockerfile...
目次MySQL 内部結合、左結合、右結合、外部結合、複数テーブルクエリビルド環境: 1. 内なる慈恩...
チェックボックスの使用を実装するために画像を使用する必要がある場合は、それを使用して実装できます。実...
mysql コマンドを使用して、mysql のインストール パスを表示できます。 # 次の 2 つの...
まず、インターネット上の一般的な慣行を見てみましょうデフォルトでは、プライベート ライブラリはイメー...
当銀行のMGRは年末に開始されます。公式文書を読んだり、毎日テストを受けたりしなければなりません。毎...
遅い問題を完全に解決したい場合は、MySQL を MySQL 8.0 にアップグレードすることをお勧...