Vue の親子コンポーネントの値転送と一方向データフローの問題の詳細な説明

序文

Vue の親子コンポーネントの中心的な概念は一方向のデータフローの問題であり、プロパティは一方向に渡されることがわかっています。では、単方向データフロー問題とは一体何でしょうか? この記事では、この知識ポイントに関する研究ノートをまとめています。

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

<div id="アプリ">
    <ブログ項目:title="タイトル"></ブログ項目>
</div>
// サブコンポーネントを定義する Vue.component("blog-item", {
      プロパティ: ['タイトル'],
      データ（） {
        戻る {
        }
      },
      テンプレート: "<p>{{title}}</p>"
 })
// 親コンポーネントを定義する new Vue({
      el: "#app",
      データ（） {
        戻る {
          タイトル: "メッセージ",
        }
      },
    })

親コンポーネントは、:title = "title" を通じて子コンポーネントに値を渡します。子コンポーネントは、props を通じて親コンポーネントの値を受け取り、補間式を通じてページにレンダリングします。

2. サブコンポーネントのプロパティの型制約の問題

一般的な型制約は次のとおりです。

小道具: {
      タイトル: 文字列、
      いいね: 数、
      isPublished: ブール値、
      コメントID: 配列、
      著者: オブジェクト、
      コールバック: 関数、
      contactsPromise: Promise // または他のコンストラクタ
    }

上記の一般的な型に加えて、Vue は子コンポーネントのプロパティの型をカスタマイズするためのコンストラクターとカスタム関数も提供します。

（１）コンストラクタカスタム型

//両方のコンポーネントに共通のカスタム関数 function Person (firstName, lastName) {
        this.firstName = ファーストネーム
        this.lastName = 姓
      }
      //Vue.component('blog-post', { を使用します
      小道具: {
        著者: 人物
      }
      //親コンポーネントで使用 var obj = new Person("1","2")
      <ブログ投稿:author='obj'></ブログ投稿>

上記のコードでは、まずオブジェクトの作成に使用できるパブリックカスタムコンストラクターを定義します。インスタンスオブジェクトには、firstName と lastName という 2 つのプロパティがあります。親コンポーネントでは、コンストラクターを呼び出して obj インスタンスを作成し、それを子コンポーネントに渡します。子コンポーネントは、オブジェクトを受け取るためのコンストラクター型のプロパティを定義します。

（２）カスタム関数とカスタム型

// カスタム関数 Vue.component('blog-post', {
      小道具: {
        propsA: String, //文字列型である必要があります propsB: [String, Number], //複数のオプション型 propsC: {type: Number, default: 100}, //型を定義し、デフォルト値を設定します //カスタム検証関数 propsD: {
          バリデータ: 関数 (値) {
            // この値は、次の文字列のいずれかと一致する必要があります。 return ['success', 'warning', 'danger'].indexOf(value) !== -1
         }
        }
      }

Vue は、子コンポーネントが受け取るパラメータの型を定義するための非常に柔軟な方法を提供します。上記のコードでは、カスタム検証関数を使用して、親コンポーネントの値の型を制限しています。

3. 一方向データフロー問題

一方向のデータフローは、Vue の親子コンポーネントの中心的な概念であり、プロパティは一方向にバインドされます。親コンポーネントのプロパティ値が変更されると、対応する変更のために子コンポーネントに渡され、一方向の下向きバインディングが形成されます。親コンポーネントのプロパティ変更は下流の子コンポーネントに流れますが、逆に、子コンポーネントが誤って親コンポーネントのデータを変更して他の子コンポーネントの状態に影響を与えることを防ぐために、Vue では下から上へのデータフローは許可されないと規定されています。

親コンポーネントのプロパティが変更されると、子コンポーネントに渡されますが、子コンポーネントのプロパティの変更は親コンポーネントには影響しません。この場合、props は少し役に立たないと感じるかもしれません。コンポーネントを初期化するときにのみ使用でき、子コンポーネントでは操作できません。そのため、使用する場合は、props を操作するために、(1) ローカル変数を定義して props で初期化し、このローカル変数を操作するという 2 つの方法がよくあります。（２）計算プロパティを定義し、propsを処理してそれを返します。

<div id="アプリ">
    <ブログ項目:title="title1"></ブログ項目>
    <ブログ項目:title="title2"></ブログ項目>
    <ブログ項目:title="title3"></ブログ項目>
    <時間>
    <button @click='toclick'>クリックしてください</button>
  </div>
  // サブコンポーネントを定義する Vue.component("blog-item", {
      プロパティ: ['タイトル'],
      データ（） {
        戻る {
        }
      },
      テンプレート: "<p>{{title}}</p>"
    })
    // 親コンポーネント new Vue({
      el: "#app",
      データ（） {
        戻る {
          タイトル1: "111",
          タイトル2: "222",
          タイトル3: "333"
        }
      },
      メソッド: {
        クリック() {
          this.title3 = "000"
        }
      }
    })

<div id="アプリ">
    <ブログ項目:title="タイトル"></ブログ項目>
  </div>
  // サブコンポーネントを定義する Vue.component("blog-item", {
      プロパティ: ['タイトル'],
      計算: {
        計算されたタイトル() {
          「computedTitle」+ this.title を返します。
        }
      },
      データ（） {
        戻る {
          サブタイトル: "サブタイトル" + this.title
        }
      },
      テンプレート: "<p>{{title}}==={{subTitle}}==={{computedTitle}}</p>"
    })
    // 親コンポーネント new Vue({
      el: "#app",
      データ（） {
        戻る {
          タイトル: "111",
        }
      },
    })

要約する

Vue の親コンポーネントと子コンポーネント間の値の転送と一方向データフローの問題に関するこの記事はこれで終わりです。Vue の親コンポーネントと子コンポーネント間の値の転送と一方向データフローに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: