记如何解决vue父组件改变不了子组件props传过来的数组

父组件：(组件内容写个大概)

<template>
  <div class="feedback">
    <comment-item :commentList="commenList"></comment-list>
  </div>
</template>

<script>
import CommentItem from '...' //导入子组件
import {queryFeedBack} from '...'  //导入数据接口

export default {
  data() {
     return {
       commentList: []
    }
  },
  mounted() {
   queryFeedBack(查询条件),then(res => {
     this.commentList = res.page.list
   })
  }
}
</script>复制代码

子组件CommentItem（组件写个大概）

<template>
   <ul>
     <li v-for="item in dataset">  //dataset是loadsh处理过的数据
       <div class="right-panel">
         <el-button @click="(item.showPanel = !item.showPanel)">我来回复：</el-button>
          <!--点击我来回复：点击一次显示，再点击一次不显示-->
         <div v-show="item.showPanel">  这个showpanel是在父组件里面新加的属性
           <input  v-model="item.replyText">
           <button @click="submitReply(item)">提交回复</button>
         </div>
       </div>
     </li>
   </ul>
</template>

<script>
import _ from 'loadsh' //导入的这个工具我作了一会功课，里面封装了不少字符串、数组、对象等常见数据类型的处理函数
// lodash的全部函数都不会在原有的数据上进行操做，而是复制出一个新的数据而不改变原有数据，下面须要仔细去看一下这个工具的使用。

export default {
  props: {
    commentList: {
      type: Array,
      default() {
         []
        }
     }
   },
   data() {
     return {
       dataset: []  //复制了个数组来处理
      }
     },
   watch: {  //这里是重点，用到了loadsh处理函数
    commentList: {
     immediate: true,
     handler(value) {   //好好理解下面这句处理
       this.dataset = _.map(value || [],item => _.extend({showPanel:false,replyText: null}, item))
     }
    }
   },
methods: {
  submitReply(data) {  
    data.replyText = null   //提交完文本框须要清空
  }
}
 }
</script>复制代码

总结：

必定要了解loadsh工具箱怎么用，数组写在props里面，数组的值在父组件中很难被改变，须要借助loadsh工具箱在子组件中进行处理。