使用场景
在Vue项目中,通常我们都会封装一些组件,以供在项目中复用,方便维护。通常我们我们会在父组件中引用子组件,可以通过props给子组件传递不同的值,从而渲染不同数据的子组件。
但是有的时候,我们传递给组件的值虽然会发生变化,watch也可以监听到不同的值,但是子组件的中展示的数据并没有发生变化,created()生命周期函数也只会执行一次,这是因为子组件在第一次触发事件的时候就已经渲染好了,之后尽管父组件中再次触发事件,传递不同的数据,子组件也不会在重新渲染。
但是我们需要,父组件中每次触发事件的时候,子组件都可以重新渲染,这时候就可以用到vue中的key属性了,通过给子组件绑定一个key,来让vue的diff算法可以比较两次key值是否不同,如果不同,vue就会重新加载子组件,否则就保持原有状态,这样就可以达到目的了,时间戳,随机数都行
代码
<template>
<!-- 父组件 -->
<el-dialog
title="修改"
:visible="isShow"
@open='show'
append-to-body>
<el-form :model="editForm" :rules="editRules" ref="editCustomerRef">
<el-form-item
class="editAreas"
label="所属省市区:"
prop="province"
:label-width="formLabelWidth"
>
<!-- 子组件 -->
<areas :key="timer" ref="areasRef" @selectArea="selectArea" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="save">确认</el-button>
<el-button @click="isShow = false">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {}
},
components: {
Areas
},
methods: {
// 省市区选中
selectArea() {},
show() {
this.timer = new Date().getTime()
}
}
}
</script>