技術標籤：web前端vue元件重新整理

通過:provide / inject 方式實現!

Home.vue

<keep-alive :include="tagsList" v-if="showView">
     <router-view></router-view>
</keep-alive>


 <script>
export default {
    provide(){
        return {
            refreshView:this.refreshView
        }
    },
    data() {
        return {
            showView: true // 用於點選當前頁的router時，重新整理當前頁
        };
    },
    methods:{
        refreshView () {

            this.showView = false // 通過v-if移除router-view節點
            this.$nextTick(() => {
                this.showView = true // DOM更新後再通過v-if新增router-view節點
            })
             
        }
    }
    </script>
 

在元件中使用:

<span @click="refresh">重新整理</span>

<script>
    export default {
        inject:['refreshView'],
          methods:{
            refresh(){
                this.refreshView()
            }
        }
    };
</script>