Vue中子组件修改父组件的值

项目需求

最近比较空闲，打算写几个组件，然后遇到了这个问题，父组件传值给子组件后，子组件需要可以修改父组件的值，经过一番研究，得到以下解决方法

开发操作

父组件引入子组件iconcard，如下图，并准备好传递的数组list1，里面定义一个修改数组list1的方法Change

    import iconcard from "./iconcard.vue"
	export default {
		name: "app",
		components: {
			iconcard
		},
		data() {
			return {
				list1: [{
						name: "土地管理",
						src: require("./image/yunying_dikuai_icon.png"),
					}
				],
			}
		},
		methods: {
			//修改最近使用内容
			Change(content) {
				this.list1 = content;
				console.log(this.list1)
			}
		},
	};

然后使用子组件，传递两个参数，第一个是传递给父组件的数据，第二个是修改父组件的方法，Change方法如上代码，用于修改父组件的传递的值,listChange为自定义方法，用于子组件使用修改父组件的值

<iconcard :list="list1"    @listChange="Change"></iconcard>

然后是子组件，可以看到子组件内定义了一个edit方法，该方法通过$emit触发父组件的自定义方法，注意里面的方法名和上面组件里面的listChange是对应的，这样才能确保子组件触发父组件的方法

<template>
	<view class="new_card">
		<view class="header">
			<view  class="action" @click="edit">编辑</view>
		</view>
		<view class="card_item" v-for="(item, index) in list" :key="index" >
			<view class="card_image">
				<img :src="item.src" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "app",
		props: {
			//图标数据
			list: {
				type: Array,
			},
		},

		methods: {
			edit() {
				this.$emit("listChange",that.list)
			},
	

		},
	};
</script>

关键代码就是子组件中的edit方法和父组件中使用子组件的操作

edit() {
	this.$emit("listChange",that.list)
}

<iconcard :list="list1"    @listChange="Change"></iconcard>

上述内容如果存在问题欢迎大家批评指正！！！