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

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

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

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

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

<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",
        }
      },
    })