一、问题
开发中,需求是将内容展示作为一个组件,输入为contentId,请求在组件中,只需根据父组件传过来的contentId去请求内容的详情即可。但是过程中却发现一个问题,第一次打开弹框,展示内容没问题,但是接下来的多次点击发现一直是第一次请求的数据,也就是说,内容详情并未再次发生改变。
二、原因
在父组件中引用的子组件标签上添加属性,来渲染可以拥有不同数据的子组件。但是vue 的组件有个特点,如果我们这一次和上一次传过去的属性值一样的话,watch 监听的属性因为没有新的变化(这次的值和上一次的值一样watch 中调用的函数不执行),导致对应的数据也没有变化。created() 生命周期函数也是只执行一次。但是有时候我们需要这个组件每次都重新生成dom 元素,每次都执行created() 函数。这时候就用到了vue中的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>
总结:
其实解决问题的本质只要可以让弹框这个dom元素每次打开重新加载一次,就会解决。
只要是一个变量即可促使dom刷新,例如:v-if、v-show、当前时间戳、或者在子组件使用watch监听