vue 父組件中每次點擊按鈕重新加載子組件，（重新生成dom 元素）

原文：vue 項目， 父組件中每次點擊按鈕重新加載子組件，（重新生成dom 元素）_泥猴桃的博客-CSDN博客_vue重新加載組件

vue是組件化開發的項目，很多情況下會把公共組件提取出來，來減少代碼量，提高開發效率，和以后更好的可維護性。很多情況下，父組件中都會引用子組件這種情況。通過給在父組件中引用的子組件標簽上添加屬性，來渲染可以擁有不同數據的子組件。但是vue 的組件有個特點，如果我們這一次和上一次傳過去的屬性值一樣的話，watch 監聽的屬性因為沒有新的變化(這次的值和上一次的值一樣watch 中調用的函數不執行)，導致對應的數據也沒有變化。created() 生命周期函數也是只執行一次。（很尷尬，讓我這個用慣了react 的人剛開始還有點不適應。但是畢竟胳膊擰不過大腿不是，還是趕緊想辦法把。）

但是有時候我們需要這個組件每次都重新生成dom 元素，每次都執行created() 函數。這時候就用到了vue中的key 屬性。
key屬性和react 的key屬性基本上是一樣的（個人理解，如果有錯誤還請拍磚指正）。
key 屬性不是給開發人員用的，而是用來 給vue 元素渲染的時候用的，每次渲染的時候會去拿這個key 值做對比，如果這一次的key 值和上一次的key值是不一樣的才會重新渲染dom 元素，否則保持上一次的元素狀態。
根據這個原理我們可以給key 直接綁定一個 時間戳

//父組件

<template>
    <div>
        <div>
            <h1>父級</h1>
            <button @click="handleLoad">點擊重新加載子級</button>
        </div>
        <children :key="timer"></children>
    </div>
</template>
<script>
import children from '@/components/parent/children'
export default {
    name: 'parent',
    components: { children },
    data () {
        return {
            timer: ''
        }
    },
    methods: {
        handleLoad () {
            this.timer = new Date().getTime()
        }
    }
}
</script>

// 子組件

<template>
    <div>
        子級
    </div>
</template>
<script>
export default {
    name: 'children',
    data () {
        return {}
    },
    created () {
        console.log('重新加載啦')
    }
}
</script>