vue項目，父組件中每次點擊按鈕從新加載子組件（主要是子組件包含iframe元素）

vue項目，不少狀況下會把公共組件提取出來，來減小代碼量，提升開發效率，方便維護。不少狀況下，父組件中都會引用子組件這種狀況。經過給在父組件中引用的子組件標籤上添加屬性，來渲染能夠擁有不一樣數據的子組件。可是vue 的組件有個特色，若是咱們這一次和上一次傳過去的屬性值同樣的話，watch 監聽的屬性由於沒有新的變化(此次的值和上一次的值同樣watch 中調用的函數不執行)，致使對應的數據也沒有變化。created() 生命週期函數也是隻執行一次。

可是有時候咱們須要這個組件每次都從新生成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>

執行效果圖

每次點擊的時候都會從新加載子組件 ，created() 生命週期函數每次都會執行，從新生成dom 元素。也省的用watch 去監聽了！
轉載地址：https://blog.csdn.net/shi851051279/article/details/92802027