Vue がコンポーネント間の通信を実現するいくつかの方法 (複数のシナリオ)

<テンプレート>
    <div class="親ボックス">
        <div>
            <div>私は親ページです</div>
            <div>{{メッセージ}}</div>
        </div>
        <children :message="toChildrenMsg"></children>
    </div>
</テンプレート>
 
<スクリプト>
import Children from './Children.vue' //現在のページにサブコンポーネントを導入する export default {
    名前:"親",
    コンポーネント:{
        子供たち
    },
    データ（）{
        戻る {
            メッセージ:「私は親ページのコンテンツです」
            toChildrenMsg: '親ページから子ページに渡されたコンテンツ'
        }
    }
}
</スクリプト>

<テンプレート>
    <div class="children-box">
        <div>
            <div>私はサブページです</div>
            <div>{{メッセージ}}</div>
        </div>
    </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    名前:"子供",
    小道具:{
        メッセージ：{
            type:String, //型判定 default:'' //デフォルト値}
    }
}
</スクリプト>

<テンプレート>
    <div class="children-box">
        <div>
            <div>私はサブページです</div>
            <div>{{メッセージ}}</div>
            <div><span @click="toParentMethod">クリックすると親ページ イベントがトリガーされます</span></div>
        </div>
    </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    名前:"子供",
    小道具:{
        メッセージ：{
            タイプ:文字列、
            デフォルト：''
        }
    },
    方法:{
        親メソッド(){
            this.$emit('fromChildMethod')
        }
    }
}
</スクリプト>

<テンプレート>
    <div class="親ボックス">
        <div>
            <div>私は親ページです</div>
            <div style="font-size:12px;">{{メッセージ}}</div>
            <div style="font-size:12px;color:red">{{fromChildMsg}}</div>
        </div>
        <children :message="toChildrenMsg" @fromChildMethod="fromChild"></children>
    </div>
</テンプレート>
 
<スクリプト>
'./Children.vue' から Children をインポートします。
エクスポートデフォルト{
    名前:"親",
    コンポーネント:{
        子供たち
    },
    データ（）{
        戻る {
            メッセージ:「私は親ページのコンテンツです」
            toChildrenMsg: '親ページから子ページに渡されたコンテンツ'、
            子メッセージ:''
        }
    },
    方法:{
        子から(){
            this.fromChildMsg = '子ページによってトリガーされたメソッド' //子コンポーネントによってトリガーされたメソッドをリッスンし、コンテンツを表示します}
    }
}
</スクリプト>

'vue' から Vue をインポートします
'./App' から App をインポートします
'./bus/index' からバスをインポートします
Vue.prototype.bus = バス
 
新しいVue({
  el: '#app',
  コンポーネント: { アプリ },
  テンプレート: '<App/>'
})

<テンプレート>
    <div class="親ボックス">
        <div>
            <div>私は親ページです</div>
            <div @click="toChildBus"><span>子コンポーネントと通信する</span></div>
        </div>
        <子供></子供>
    </div>
</テンプレート>
 
<スクリプト>
'./Children.vue' から Children をインポートします。
エクスポートデフォルト{
    名前:"親",
    コンポーネント:{
        子供たち
    },
    方法:{
        トチャイルドバス(){
            let val = '親コンポーネントは子コンポーネントと通信します'
            this.bus.$emit('toChild',val) //val は渡される値であり、必須ではありません}
    }
}
</スクリプト>

<テンプレート>
    <div class="children-box">
        <div>
            <div>私はサブページです</div>
            <div style="font-size:12px;color:blue;">{{fromParentMsg}}</div>
        </div>
    </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    名前:"子供",
    データ（）{
        戻る {
            親メッセージから:''
        }
    },
    マウントされた(){
        this.bus.$off('toChild')
        this.bus.$on('toChild',val=>{   
            this.fromParentMsg = val //これはコピー操作であり、対応するメソッドもその中で実行できます})
    }
}
</スクリプト>

npm インストール vuex --save

'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
'./bus/index' からバスをインポートします
'./store/index' からストアをインポートします
 
Vue.config.productionTip = false
Vue.prototype.bus = バス
新しいVue({
  el: '#app',
  ルーター、
  店、
  コンポーネント: { アプリ },
  テンプレート: '<App/>'
})

<テンプレート>
    <div class="親ボックス">
        <div>
            <div>私は親ページです</div>
        </div>
        <子供></子供>
    </div>
</テンプレート>
 
<スクリプト>
'./Children.vue' から Children をインポートします。
エクスポートデフォルト{
    名前:"親",
    コンポーネント:{
        子供たち
    },
    データ（）{
        戻る {
            子メッセージ:''
        }
    }
    マウントされた(){
        this.$store.state.msg = '親コンポーネントが保存されました' // メソッド 1 でここに保存します}
}
</スクリプト>

<テンプレート>
    <div class="children-box">
        <div>
            <div>私はサブページです</div>
            <div @click="fromStore"><span>ストアから入手</span></div>
            <div>{{fromStoreMsg} </div>
        </div>
    </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
    名前:"子供",
    データ（）{
        戻る {
            fromStoreMsg:''
        }
    },
    方法:{
        fromStore(){
            this.fromStoreMsg = this.$store.state.msg
        }
    }
}
</スクリプト>

// ストア/index.js
ゲッター:{
    getMsg:状態=>{
    状態.msgを返す
  }
},
 
 
//コンポーネントで this.$store.getters.getMsg を取得します
 
// mapGetters も使用できます import { mapGetters } from 'vuex'
計算: {
 ...mapGetters(['getMsg'])
},