Vue解决子组件修改父组件props参数不可逆问题

直接赋值props里面数据会导致如下错误

解决这个bug有以下两种方法，

一：使用$emit函数

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件

修改后：

父组件

//html
<tree-list :typeList="typeList" :subTypeList="subTypeList" @showSubType="updateSubType"></tree-list>

//methods
methods:{
			updateSubType(data){//子组件触发事件
			this.subTypeList = data;//改变了父组件的值
			console.log('subTypeList:'+this.subTypeList)
	 },
}

子组件

this.$emit("showSubType",res.data.data)

二：从新定义一个属性去接收props参数值

//html
<view  class="nav-right-item" v-for="(item,index) in newSubTypeList" :key="index" ></view>


//js
props:{
			
	subTypeList:{
		type:Array,
		default:function(){
			return []
			}
		},
	},
data() {
	return {
		newSubTypeList:this.subTypeList
	}
}

但这是会发现传过来的值不会显示，这是因为data只执行一次，所以需要实时去监听参数，用watch函数

watch: {
	subTypeList(val){
		this.newSubTypeList = val;
	}
}