首页 ›  文章

vue项目,父组件中每次点击按钮重新加载子组件(主要是子组件包含iframe元素)

2019-11-01

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>

执行效果图 20190618235853749.png 每次点击的时候都会重新加载子组件 ,created() 生命周期函数每次都会执行,重新生成dom 元素。也省的用watch 去监听了! 转载地址:https://blog.csdn.net/shi851051279/article/details/92802027

原文链接:segmentfault.com

上一篇:JavaScript复杂判断(if else / switch)的更优雅写法优化冗余
下一篇:安装confluence和破译
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入