Vueの子コンポーネントと親コンポーネントの詳細な分析

<div id="アプリ">
  <コンポーネント2></コンポーネント2>
</div>
<スクリプト>
  // グローバル登録 Vue.component("component1", {
    テンプレート: `
    <div>
      <h2>こんにちは</h2>
    </div>
    `
  })

  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      メッセージ: 「こんにちは」
    },
    コンポーネント:
      // ローカル登録 "component2": {
        テンプレート: `
            <div>
              <コンポーネント1></コンポーネント1>
              <h2>世界</h2>
            </div>
        `、
      }
    }
  })
</スクリプト>

<div>
  <コンポーネント-1></コンポーネント-1>
  <h2>世界</h2>
</div>

<div>
  <div>
      <h2>こんにちは</h2>
    </div>
  <h2>世界</h2>
</div>

<テンプレートid="component2">
  <div>
    <コンポーネント1></コンポーネント1>
    <h2>世界</h2>
  </div>
</テンプレート>

コンポーネント:
  // ローカル登録 "component2": {
    テンプレート: `#component2`,
  }
}

<script type="text/x-template" id="component2">
  <div>
    <コンポーネント1></コンポーネント1>
    <h2>世界</h2>
  </div>
</スクリプト>
 

<div id="アプリ">
  <test1 :cmovies="映画"></test1>
</div>
<テンプレートid="test1">
  <div>
    <ul>
      <li v-for="cmovies 内のアイテム">{{item}}</li>
    </ul>
  </div>
</テンプレート>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      映画：[「ワンピース」、「海爾兄弟」、「海王類」]
    },
    コンポーネント:
      "テスト1": {
        テンプレート: `#test1`,
        小道具: ['cmovies'],
        データ（）{
          戻る{}
        },
      }
    }
  })
</スクリプト>

// シンプルな構文 Vue.component('props-demo-simple', {
  プロパティ: ['size', 'myMessage']
})

// 検証を提供するオブジェクト構文 Vue.component('props-demo-advanced', {
  小道具: {
    // 検出タイプの高さ: 数値、
    // 検出タイプ + その他の検証年齢: {
      タイプ: 数値、
      デフォルト: 0,
      必須: true、
      バリデータ: 関数 (値) {
        戻り値 >= 0
      }
    }
  }
})

<div id="アプリ">
  <test1 @item-click="cpnClick"></test1>
</div>
<テンプレートid="test1">
  <div>
    <button v-for="カテゴリ内のアイテム" @click="btnClick(item)">{{item.name}}</button>
  </div>
</テンプレート>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      メッセージ: 「こんにちは」
    },
    メソッド: {
      cpnClick(アイテム){
        console.log("成功", 項目)
      }
    },
    コンポーネント:
      // ローカル登録コンポーネント test1
      "テスト1": {
        データ（）{
          戻る {
            カテゴリー: [
              {id: "aaa", name: "ホットなおすすめ"},
              {id: "bbb", 名前: "モバイルデジタル"},
              {id: "ccc", name: "家電製品"},
              {id: "ddd", 名前: "食品・飲料"},
            ]
          }
        },
        メソッド: {
          btnClick(アイテム){
            this.$emit("item-click", item)
          }
        },
        テンプレート: `#test1`
      }
    }
  })
</スクリプト>

<div id="アプリ">
  <cpn :number1="num1" :number2="num2"></cpn>
</div>
<テンプレートid="cpn">
  <div>
    <h2>{{番号1}}</h2>
    <h2>{{数値2}}</h2>
  </div>
</テンプレート>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      数値1: 0,
      数値2: 1,
    },
    コンポーネント:
      // サブコンポーネント cpn を定義する
      "cpn": {
        テンプレート: `#cpn`,
        小道具: {
          数値1: 数値、
          数値2: 数値、
        }
      }
    },
  })
</スクリプト>

<テンプレートid="cpn">
  <div>
    <h2>小道具:{{number1}}</h2>
    <input type="text" v-model="number1">
    <h2>小道具:{{number2}}</h2>
    <input type="text" v-model="number2">
  </div>
</テンプレート>

<テンプレートid="cpn">
  <div>
    <h2>データ:{{dnumber1}}</h2>
    <input type="text" v-model="dnumber1">
    <h2>データ:{{dnumber2}}</h2>
    <input type="text" v-model="dnumber2">
  </div>
</テンプレート>
データ（）{
   戻る {
     dnumber1: this.number1,
     dnumber2: this.number2,
   }
},

<div id="アプリ">
  <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"></cpn>
</div>
<テンプレートid="cpn">
  <div>
    <h2>小道具:{{number1}}</h2>
    <h2>データ:{{dnumber1}}</h2>
    <ラベル>
      <input type="text" :value="dnumber1" @input="num1Input">
    </ラベル>
    <h2>小道具:{{number2}}</h2>
    <h2>データ:{{dnumber2}}</h2>
    <ラベル>
      <input type="text" :value="dnumber2" @input="num2Input">
    </ラベル>
  </div>
</テンプレート>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      数値1: 0,
      数値2: 1,
    },
    メソッド: {
      num1変更(値){
        this.num1 = parseInt(値)
      },
      num2change(値){
        this.num2 = parseInt(値)
      },
    },
    コンポーネント:
      // サブコンポーネント cpn を定義する
      "cpn": {
        テンプレート: `#cpn`,
        小道具: {
          数値1: 数値、
          数値2: 数値、
        },
        データ（）{
          戻る {
            dnumber1: this.number1,
            dnumber2: this.number2,
          }
        },
        メソッド: {
          num1Input(イベント){
            // 1. 入力の値をdnumberに代入します。this.dnumber1 = event.target.value
            // 2. 親コンポーネントが値を変更するには、イベントを発行する必要があります this.$emit("num1change", this.dnumber1)
          },
          num2Input(イベント){
            // 1. 入力の値をdnumberに代入します。this.dnumber2 = event.target.value
            // 2. 親コンポーネントが値を変更するには、イベントを発行する必要があります this.$emit("num2change", this.dnumber2)
          }
        }
      }
    },
  })
</スクリプト>

<div id="アプリ">
  <cpn ref="aaa"></cpn>
  <button @click="btnClick">ボタン</button>
</div>
<テンプレートid="cpn">
  <div>
    私は子コンポーネントです</div>
</テンプレート>
<script src="../js/vue.js"></script>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      メッセージ: 「こんにちは」
    },
    メソッド: {
      btnClick(){
        console.log(this.$refs.aaa.name)
        this.$refs.aaa.showMessage()
      }
    },
    コンポーネント:
      "cpn": {
        テンプレート: `#cpn`,
        データ（）{
          戻る {
            name: 「私はサブコンポーネントの名前です」
          }
        },
        メソッド: {
          表示メッセージ(){
            console.log("メッセージを表示")
          }
        }
      }
    }
  })
</スクリプト>