Vue 優雅的強制重新渲染子組件

原理：

我們通過 :key 實現，當key 值變更時，會自動的重新渲染，key的作用主要是爲了高效的更新虛擬DOM。

 

代碼實現：

<template>
    <div>
        <!-- 父組件 -->
        <div>
            <button @click="reLoad">點擊重新渲染子組件</button>
        </div>
        <!-- 內容庫子組件 -->
        <lib-window :key="time" :channelCode="searchChannelCode"></lib-window>
    </div>
</template>

<script>
import children from '@/components/parent/children'
export default {
    name: 'contentLib',
    components: { libWindow },
    data () {
        return {
            time: ''
        }
    },
    methods: {
        reLoad () {
            this.time = new Date().getTime()
        }
    }
}
</script>