2021-03-25 VUE 子组件修改父组件的值

1、通过事件发送给父组件来修改
在子组件test1中
<input type="text" v-model="book"/>
<button @click="add">添加</button>
<p v-for="(item, index) of books" :key="index">{{item}}</p>
...
methods: {
add() {
// 直接把数据发送给父组件
this.emit('update', this.book); this.book = ''; }, }, **在父组件中** <test1 :books="books" @update="addBook"></test1> ... addBook(val) { this.books = new Array(val) }, •2、使用.sync 来让子组件修改父组件的值(其实是上面方法的精简版) **在父组件中,直接在需要传递的属性后面加上.sync** <test4 :word.sync="word"/> **在子组件中** <template> <div> <h3>{{word}}</h3> <input type="text" v-model="str" /> </div> </template> <script> export default { props: { word: { type: String, default: '', }, }, data() { return { str: '', } }, watch: { str(newVal, oldVal) { // 在监听你使用update事件来更新word,而在父组件不需要调用该函数 this.emit('update:word', newVal);
}
}
}
</script>
3、在子组件中拷贝一份副本
子组件中
export default {
props: {
// 已经选中的
checkModalGroup: {
type: Array,
default: [],
required: false,
}
},
data() {
return{
copyCheckModalGroup: this.checkModalGroup, // 选中的
}
},
methods: {
// 一个一个的选择
checkAllGroupChange(data) {
// 把当前的发送给父组件
this.$emit('updata', data);
},
},
watch: {
checkModalGroup(newVal, oldVal) {
this.copyCheckModalGroup = newVal;
}
}
}
父组件中直接更新传递给子组件的数据就可以
...
// 更新子组件数据
roleCheckUpdata(data) {
this.roleGroup = data;
},
...
https://www.jb51.net/article/142021.htm

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容