Vue父子组件传值，父组件通过props传值给子组件，子组件触发父组件数据更新，子组件未更新(例：展开收缩操作)

Vue父子组件传值，父组件通过props传值给子组件，子组件触发父组件数据更新，子组件未更新

一、需求：

父组件：是一个数据列表页，需要在获取到列表数据后，将数值传递给子组件—展示。
子组件：修改对象或数组中的键，对渲染的列表的每一项(item) 的文本内容(item.content)进行展开收缩操作。

二、编写代码：

父组件：

<div>
	//父组件调用子组件   childlist:后台返回的数据列表 绑定ref
	<Datalist ref="child" :childlist="childlist" @updataList='updataList' /> 
	//@updataList='updataList' 绑定触发方法
</div>

//子组件触发了updataList方法  val接收的子组件的数据
updataList(val){
	//更新数据操作
      this.childlist.forEach(item => {
      	//获取当前点击的item 即需要改变状态的item
        if(val === item){
         //判断此时的状态是展开还是收起 然后取反即可
          if(item.isexpand){
            item.isexpand = false
          }else{
            item.isexpand = true
          }
        }
      })
      //数据已经更新
      //console.log(this.childlist);
      this.$nextTick(() => {
         // 数据已经更新 调用子组件的方法更新子组件
         this.$refs.child.initData();
       })
    },

子组件：

<div>
	<ul>
        <li v-for="(item,index) in newchildlist" :key="index" @click="">
        	<div class="desc">
				<p class="min" :class="item.isexpand ? 'max' : 'min'" v-html="item.desc"></p>
				<div>
					<span class="zhankai" @click="expand(item)" v-if="!item.isexpand">展开</span>
                    <span class="shouqi" @click="expand(item)" v-else>收起</span>
				</div>
			</div>
        </li>
    </ul>
</div>


props:['childlist'],
data(){
	return{
		newchildlist:[]
	}
}

mounted() {
  //获取列表
  this.initData()
},
methods:{
	initData(){
	    this.newchildlist= this.childlist
	    //console.log(this.inspirationlist);
	},
	
	//展开收起
	expand(item) {
		//$emit触发父组件  item需要传到父组件的数据
		this.$emit('updataList', item);
	},
}




<style>
			.desc{
                width: 100%;
                .min{
                  max-height: 40px;
                }
                .max{
                  max-height: 999px;
                }
              }
</style>

三、发现未能实现：

问题：控制台打印 子组件数据更新了，但视图并未更新。

四、解决：

以上思路不变，只需修改父组件内的: updataList() 方法 如下：① ②
使用$set方法进行修改，(当时我是直接对数组中的值进行修改，但是视图没有发生变化)

//子组件触发了updataList方法  val接收的子组件的数据
updataList(val){
	//更新数据操作
      this.childlist.forEach(item => {
      	//获取当前点击的item 即需要改变状态的item
        if(val === item){
         //判断此时的状态是展开还是收起 然后取反即可
          if(item.isexpand){
          	//① 数据更新方式改变:使用$set方法进行修改
            // item.isexpand = false
            this.$set(item, "isexpand", false);
          }else{
            // item.isexpand = true
            this.$set(item, "isexpand", true);
          }
        }
      })
      //数据已经更新
      //console.log(this.childlist);
      //② 此时就不需要调用子组件的初始方法了
      // this.$nextTick(() => {
      //   // 调用子组件的方法
      //   this.$refs.Inspirationlist.initData();
      // })
    },