项目需求
最近比较空闲,打算写几个组件,然后遇到了这个问题,父组件传值给子组件后,子组件需要可以修改父组件的值,经过一番研究,得到以下解决方法
开发操作
父组件引入子组件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>
上述内容如果存在问题欢迎大家批评指正!!!