关于父子组件传值触发@error问题

起因： 小说网站换了域名，导致无法加载小说封面

暂时解决思路： 使用默认图片代替

后期解决办法： 使用FastDFS存入自己服务器

现象

父组件传入rangkingList给子组件，子组件修改数组里的picUrl，但是父组件并没有渲染

解决过程

使用wactch监视rangkingList

// 子组件 
export default 
{ 
name: 'ChildComponent', 
props: ['rankingList'], 
watch: { 
rankingList:
{ 
handler(newValue) 
{ 
console.log('Ranking list:', newValue); // 在这里进行你想要的操作，例如更新数据或触发其他方法 
}, 
deep: true, // 如果 rankingList 是一个数组或对象，使用 deep 选项进行深度监听 
}, 
}, 
// ... 
}

控制台打印发现成功赋值的，右键审查页面图片发现并没有改变

猜想

子组件改变props里的值后，需要重新提交给父组件，父组件在传给子组件进行渲染即可

代码

父组件

     <view slot="content0" class="aloysTabContent">
 
        <manRanking :rankingList="rankingList" @update:rankingList="updateRankingList"></manRanking>
 
        <view class="isOver" v-if="flag">-----数据已经到底了------</view>
 
      </view>
 
 method:
 
    updateRankingList(newRankingList) {
 
      // 使用修改后的 rankingList 更新父组件的数据
 
      this.rankingList = newRankingList;
 
    },

子组件

<view class="box" v-for="(item, index) in rankingList" :key="index">
 
      <view class="books" @click="bookDetailClick({ item })">
 
        <image
 
          class="img"
 
          :src="item.picUrl"
 
          @error="imagerror($event, index)"
 
          mode="widthFix"
 
          style="width: 150rpx"
 
        ></image>
 

 imagerror: function (e, img_index) {
 
      var _this = this;
 
      var modifiedRankingList = [..._this.rankingList]; // 创建一个新的数组作为 modifiedRankingList
 
  
 
      if (_this.rankingList.length > 0) {
 
        modifiedRankingList[img_index].picUrl = "../../static/default.gif";
 
      }
 
      // 触发自定义事件，将修改后的 rankingList 传递给父组件
 
      this.$emit("update:rankingList", modifiedRankingList);
 
    },

文言一心回答

在Vue.js中，当子组件通过props接收父组件的内容并进行修改时，通常不建议直接修改props，因为这可能会导致预期之外的应用行为。相反，建议通过触发一个自定义事件来通知父组件更新数据。

以下是一种常见的方法来实现这个目标：

1. 在子组件中，使用$emit方法触发一个自定义事件，例如update:rankingList。将修改后的rankingList作为参数传递给该事件。

子组件示例代码：

<template>    
<!-- 子组件模板 -->  
</template>    
<script>  
export default {    
props: ['rankingList'],    
methods: {      
updatePicUrl() {        
// 修改 rankingList 中的 picUrl        
// ...          
// 触发自定义事件，将修改后的 rankingList 传递给父组件
this.$emit('update:rankingList', modifiedRankingList);      }    
}  
}  
</script>

2. 在父组件中，使用v-on指令（或简写形式@）来监听子组件触发的update:rankingList事件。在事件处理函数中，使用修改后的rankingList来更新父组件的数据，从而触发重新渲染。

父组件示例代码：

<template>    
<div>      
<manRanking :rankingList="rankingList" @update:rankingList="updateRankingList">
</manRanking>      
<!-- 其他代码 -->    
</div>  
</template>   
<script>  
export default {    
data() {      
return {        
rankingList: [/* 初始的 rankingList 数据 */]      
}    
},    
methods: {      
updateRankingList(newRankingList) {        
// 使用修改后的 rankingList 更新父组件的数据 
this.rankingList = newRankingList;      
}    
}  
}  
</script>

这样，当子组件修改了rankingList中的picUrl并触发update:rankingList事件时，父组件会响应该事件并使用修改后的rankingList数据进行重新渲染。