共计 1043 个字符,预计需要花费 3 分钟才能阅读完成。
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
正文完
发表至: javascript
2019-11-01