vue父组件更新,子组件没发生变化,vue父组件更新会导致子组件更新吗
这篇文章主要介绍了某视频剪辑软件父组件数据更新子组件相关内容未改变问题（用看解决),具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
父组件数据更新子组件相关内容未改变
父组件
在父组件中，根据后台给的数据（数组)，v-for生成子组件
div class=存在
现有项目：item prop= item v-for=(item，index)in get data :key= index :index= index @ click= senditogetdata(index) v-show= true /现有项目
/div
子组件（existProject）
模板
！-过渡名称= El-放大中心-
div class= exist project box v-show= show 2
div class=existContentBox
div class=existContent
div class= exist title“{ item prop。标题} }/div
div class=stateBox
span class= state“{ status _ tit } }/span
span class= number v-if=项目道具。状态==2 收集份数：{{itemprop.asyncCount}}份/span
/div
div class=tiemBox
{{createtime}}
/div
/div
/div
div class=existButton
李v-if=道具。status==0 @ click= turn edit(道具。qid)’
i class=icon icon-edit/i
跨度编辑/span
/李
李v-if=道具。status==0 @ click=转送(道具。qid)’
图标图标-发送/i
跨度发布/span
/李
li v-if=itemprop.status==2
i class=icon icon-data/i
跨度数据/span
/李
！- li v-if=itemprop.status==2
i class=icon icon-data/i
跨度暂停/span
/李
li v-if=itemprop.status==2
i class=icon icon-data/i
跨度终止/span
/李-
li @click=delItem(itemprop.qid)
图标图标-其他/i
跨度删除/span
/李
/div
/div
！-/过渡-
/模板
脚本
从" axios "导入爱可信
导出默认值{
data(){w
返回{
创建时间：,
状态标题：,
表演2:没错
}
},
道具：[itemprop]，
方法：{
turnEdit(id){
调试器；
console.log(id)
axios。默认值。标题。common[ token ]=JSON。解析(窗口。本地存储。getitem( token ))
axios.get(/question/ id)。然后(响应={
console.log(响应);
var obj=响应。数据。数据；
变量内容=对象内容
对于(设I=0；一。内容长度；i ){
内容。分量=这个10.95美元选项。方法。inittype(obj。目录[I]。类型)
}
console.log(obj)
窗户。本地存储。setitem( workInfoList ，JSON。stringify(obj))；
这个. router.push({
路径："/编辑"，
查询：{
id: id
}
})
窗户。位置。重新加载()
})。接住(错误={
console.log(错误)
})
},
turnSend(id){
调试器；
console.log(id)
axios。默认值。标题。common[ token ]=JSON。解析(窗口。本地存储。getitem( token ))
axios.get(/question/ id)。然后(响应={
console.log(响应);
var obj=响应。数据。数据；
console.log(obj)
窗户。本地存储。setitem( workInfoList ，JSON。stringify(obj))；
这个. router.push({
路径："/sendProject "，
查询：{
id: id
}
})
窗户。位置。重新加载()
})。接住(错误={
console.log(错误)
})
},
交货(id){
这个. $确认(此操作将删除该文件进入草稿箱，是否继续？, 提示, {
confirmButtonText:确定，
取消按钮文本： 取消，
类型："警告"
})。然后(()={
axios。默认值。标题。common[ token ]=JSON。解析(窗口。本地存储。getitem( token ))
axios.delete(/question/ id)。然后(响应={
console.log(响应)
//this.show2=false
这个$家长。获取page()；
})
})。接住(错误={
console.log(错误)
})
},
initType(str){
开关（字符串){
情况一：返回电台；
情况二：返回检查；
情况3:返回“间隙填充”；
情况四：返回水平；
情况5:返回光输入；
案例六：回报率；
情况7:返回备注；
案例8:返回选择选项；
情况9:返回排序；
案例10:返回“表号”；
案例11:返回”临时”；
}
},
},
已安装(){
//控制台。日志(这个。物品道具。创建时间)
var转换时间=新日期(this.itemprop.createTime)
这个。创建时间=变换时间。tolocalestring()；
console.log(this.createtime)
},
}
/脚本
因为有多条数据，所以有分页处理，在第一页中数据显示正常，但是在获得第二页数据并赋值给父组件的数据后，子组件的信息保留的还是第一页的信息
解决方法，使用watch深度监听
观察：{
itemprop:{
处理器(n，o){
控制台。日志(这个。物品道具)；
var状态=this。物品道具。地位；
var显示条件=this。物品道具。显示条件；
//调试器；
这个。status _ tit=(function(status，showCondition) {
if(status==0) {
返回未发布；
}
if(status==2 showCondition==1)
{
//已发布
返回收集中；
}
如果(状态==2显示条件==0)
{
//暂停
返回已暂停；
}
if(状态==2显示条件==-1){
//终止
返回已终止；
}
if(status==2 showCondition==2) {
//问卷发布结束
返回已结束；
}
})(状态，显示条件)
},
深：真的，
即时：真的，
}
}
看可以监听子组件的数据变化，数组或者对象要用深度监听，字符串什么的不用深度监听，这样就可以在分页切换数据后，就不会保留原有的信息，而是新的信息了
循环中子组件不更新问题
解决方法
这是元素-用户界面的一个bug，解决方案是从埃尔表中增加一个行键属性，并为行键设置一个能唯一标识的字段名。
1.这个可以是数据库的编号字段
el表行键=_id /el表
2.给桌子增加一个随机数的键
El-table:key= math。random()/El表
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。