Vue2 における 12 種類のコンポーネント通信

// Parent.vue は <template> を転送します
    <child :msg="メッセージ"></child>
</テンプレート>

// Child.vue はエクスポート デフォルトを受け取ります {
  //書き方1: 配列を使用して props:['msg'] を受け取る
  // 書き方2: オブジェクトを使用して受信すると、受信するデータ型を制限したり、デフォルト値を設定したり、検証したりすることができます。 props:{
      メッセージ:{
          タイプ:文字列、
          デフォルト: 'これはデフォルトのデータです'
      }
  },
  マウントされた(){
      コンソールログ(このメッセージ)
  },
}

// 親.vue
<テンプレート>
    <child :page.sync="ページ"></child>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    データ（）{
        戻る {
            ページ:1
        }
    }
}

// 子.vue
エクスポートデフォルト{
    プロパティ:["ページ"],
    計算された(){
        // 子コンポーネントの currentPage を変更すると、親コンポーネントのページも変更されます currentPage {
            得る（）{
                このページを返す
            },
            set(newVal){
                this.$emit("update:page", newVal)
            }
        }
    }
}
</スクリプト>

// 親.vue
<テンプレート>
    <子 v-model="値"></子>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    データ（）{
        戻る {
            値:1
        }
    }
}

// 子.vue
<テンプレート>
    <input :value="値" @input="ハンドラ変更">
</テンプレート>
エクスポートデフォルト{
    プロパティ:["値"],
    // イベント名を変更できます。デフォルトは入力です
    モデル：{
        イベント:"updateValue"
    },
    方法:{
        ハンドラの変更(e){
            this.$emit("入力", e.target.value) を実行します。
            // 上に名前変更がある場合は、次のようになります。$emit("updateValue", e.target.value)
        }
    }
}
</スクリプト>

// 子.vue
エクスポートデフォルト{
    データ（）{
        戻る {
            名前:「ムーファ」
        }
    },
    方法:{
        いくつかのメソッド(メッセージ){
            コンソール.log(メッセージ)
        }
    }
}

// 親.vue
<テンプレート>
    <child ref="child"></child>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    マウントされた(){
        const 子 = this.$refs.child
        console.log(child.name) // Muhuachild.someMethod("子コンポーネントのメソッドが呼び出されました")
    }
}
</スクリプト>

// Child.vue ディスパッチエクスポートデフォルト {
  データ（）{
      return { msg: "これは親コンポーネントに送信されたメッセージです" }
  },
  メソッド: {
      ハンドルクリック(){
          this.$emit("sendMsg",this.msg)
      }
  },
}
// Parent.vue は <template> に応答します
    <child v-on:sendMsg="getChildMsg"></child>
    // または省略形 <child @sendMsg="getChildMsg"></child>
</テンプレート>

エクスポートデフォルト{
    方法:{
        getChildMsg(メッセージ){
            console.log(msg) // これは親コンポーネントが受信したメッセージです}
    }
}

// 親.vue
<テンプレート>
    <child :name="名前" title="1111" ></child>
</テンプレート
エクスポートデフォルト{
    データ（）{
        戻る {
            名前:「ムーファ」
        }
    }
}

// 子.vue
<テンプレート>
    // 孫コンポーネントに渡し続ける <sun-child v-bind="$attrs"></sun-child>
</テンプレート>
エクスポートデフォルト{
    props:["name"], // これは受信することも受信しないこともできます。mounted(){
        // props が name を受け取った場合は { title:1111 } になり、それ以外の場合は { name:"Muhua", title:1111 } になります。
        console.log(this.$attrs)
    }
}

// 親.vue
エクスポートデフォルト{
    マウントされた(){
        this.$children[0].someMethod() // 最初の子コンポーネントのメソッドを呼び出す this.$children[0].name // 最初の子コンポーネントのプロパティを取得する }
}

// 子.vue
エクスポートデフォルト{
    マウントされた(){
        this.$parent.someMethod() //親コンポーネントのメソッドを呼び出す this.$parent.name //親コンポーネントのプロパティを取得する}
}

// 親コンポーネント export default{
    // メソッド 1 はメソッド provide:{ 内のメソッドを取得できません。
        名前:"Muhua",
        age: this.dataのプロパティ},
    // 方法 2 ではデータ内の属性を取得できません provide(){
        戻る {
            名前:"Muhua",
            someMethod:this.someMethod // メソッド内のメソッド }
    },
    方法:{
        いくつかのメソッド(){
            console.log("これは注入方法です")
        }
    }
}

// 子孫コンポーネントエクスポートデフォルト{
    挿入:["名前","何らかのメソッド"],
    マウントされた(){
        console.log(この名前)
        this.someMethod()
    }
}

// これを別の js ファイル Bus.js に抽出し、必要な場所にインポートします // Bus.js
「vue」からVueをインポートします
デフォルトの新しい Vue() をエクスポートします

// メイン.js
「vue」からVueをインポートします
Vue.prototype.$bus = 新しいVue()

// メイン.js
「vue」からVueをインポートします
新しいVue({
    el:"#アプリ",
    データ：{
        バス: 新しい Vue()
    }
})

// カスタムイベントを外部に送信する必要があるコンポーネント内 <template>
    <button @click="handlerClick">ボタン</button>
</テンプレート>
「./Bus.js」からBusをインポートします。
エクスポートデフォルト{
    方法:{
        ハンドラクリック(){
            // カスタムイベント名 sendMsg
            Bus.$emit("sendMsg", "これは外部に送信されるデータです")
        }
    }
}

// 外部イベントを受信する必要があるコンポーネントで「./Bus.js」からBusをインポートします
エクスポートデフォルト{
    マウントされた(){
        // イベントトリガーをリッスンする Bus.$on("sendMsg", data => {
            console.log("これは受信したデータです:", data)
        })
    },
    beforeDestroy(){
        //監視をキャンセル Bus.$off("sendMsg")
    }
}

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
'./getters' からゲッターをインポートします
'./actions' からアクションをインポートします
'./mutations' から変異をインポートします
'./state' から状態をインポートします
'./modules/user' からユーザーをインポートします

Vue.use(Vuex)

定数ストア = 新しい Vuex.Store({
  モジュール:
    ユーザー
  },
  ゲッター、
  行動、
  突然変異、
  州
})
デフォルトストアをエクスポート

「vue」からVueをインポートします
「./store」からストアをインポートします。
新しいVue({
    el:"#アプリ",
    店、
    レンダリング: h => h(App)
})

「vuex」から { mapGetters, mapMutations } をインポートします。
エクスポートデフォルト{
    計算:{
        // 方法 1 次にこれを使用します。プロパティ名...mapGetters(["getters.js プロパティ 1 を導入する", "プロパティ 2"])
        // メソッド 2...mapGetters("user", ["ユーザー モジュールの属性 1", "属性 2"])
    },
    方法:{
        // 方法 1 次にこれを使用します。プロパティ名...mapMutations(["mutations.js からの方法 1","方法 2"])
        // メソッド 2...mapMutations("user",["ユーザー モジュールからのメソッド 1","メソッド 2"])
    }
}

// または、次のように this.$store.state.xxx を取得することもできます
this.$store.state.user.xxx

// 子.vue
<テンプレート>
    <div>
        <スロット:user="ユーザー"></スロット>
    </div>
</テンプレート>
エクスポートデフォルト{
    データ（）{
        戻る {
            ユーザー:{ 名前:"Muhua" }
        }
    }
}

// 親.vue
<テンプレート>
    <div>
        <子 v-slot="スロットプロパティ">
            {{ slotProps.user.name }}
        </子>
    </div>
</テンプレート>