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>