背景
vueは<script> タグを直接組み込み！
すべてのコードを一つhtmlに書く！
ページ全体更新したくない！
特定のコンポーネントのみ更新したい！
という場合は、
[provide/inject]を使いましょう！
実装
実装ロジック：
reload()でisRouterShow(true/false)をコントロール！
これにより、router-viewの表示/非表示をコントロール！
さらに、これにより、コンポーネントの更新(reload)をコントロール！
1、親コンポーネントでproviderを作成
router-viewの表示/非表示をコントロール.html
<body>
<div id="app">
<router-view v-if='isRouterShow' class="reload"></router-view> <!-- これ!router-viewの表示/非表示をコントロール -->
</div>
</body>
reload().
var vm = new Vue({
router:router,
el: '#app'
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouterShow: true
}
},
methods: {
async reload() { //<-これ!isRouterShow(true/false)をコントロール！
this.isRouterShow = false
await this.$nextTick()
this.isRouterShow = true
}
}
})
2、子コンポーネントにinjectでreload()を導入！ reloadしたい場所に this.reload(); で書けばいい！
child-reload.
Vue.component('childreload', {
inject: ['reload'], // <- これ！injectによりこのコンポーネントの更新をコントロールできるようになる
data:function() {
return {
dateValue: null
}
},
methods: {
abtn: function() {
this.bus.$emit("passData", this.dateValue) ;
this.reload(); //例えばここ
}
},
template: '#XXXXXXX'
})