vue：v-model实现子组件和父组件数据双向绑定_学习

vue：v-model实现子组件和父组件数据双向绑定

admin

2024-01-28 12:42:20

参考文档：vue双向绑定v-model实现子组件修改数据 - 大哈博客

Vue中子组件修改父组件的值(使用v-model优化,所有自定义组件可用v-model)_目标前端大佬的博客-CSDN博客

一、父组件

二、子组件 pic-upload.vue

export default {name: 'FileUpload',model: {prop: 'value',event: 'change'},props: {value: {type: String,default: () => {return ''}}},watch: {//监听子组件数据变化imageUrl: function(newVal){//更新父组件数据this.$emit('change', newVal);},//监听父组件数据变化value: function(newVal){//更新子组件数据this.imageUrl = newVal;}},data() {return {imageUrl: null,}},created() {//组件初始化时，将父组件数据保存到子组件数据中this.imageUrl = this.value;},
},

上一篇：有哪些关于煤炭的句子？

下一篇：描述秋天多云天气的句子有哪些？

vue：v-model实现子组件和父组件数据双向绑定

相关内容

热门资讯