弹框编辑/新增，双向监听绑定操作

最新推荐文章于 2024-01-08 08:30:00 发布

micoria

最新推荐文章于 2024-01-08 08:30:00 发布

阅读量189

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/micoria/article/details/130575797

版权

背景：编辑、新增出现弹框，进行双向绑定，数据反填等操作。其中涉及父子组件传参、computed、watch相关知识。
步骤：

父组件

<!-- item  -->
<div @click="handleEditBtn(item)">编辑</div>
<!-- 引用子组件 -->
<childGrop
	open.sync="showChildBox"
	item="item"
></childGrop>

data() {
	return {
		item: {},
		showChildBox: false // 打开/显示子组件
	}
},
methods: {
	handleEditBtn(item) {
		this.showChildBox = true
		this.item = item
	}
}

子组件 childGroup

<el-dialog
	:visible.sync="visible"
>
	<div>{{item.collectType}}</div>
</el-dialog>

// 父传子 接收参数
props: {
    open: Boolean,
    item: Object
},
data() {
	return {
		cateType : ''
	}
},
computed() {
	visible: {
		// 获取变化后的参数
		get: functin(){
			// 方法一：打开即调取
			this.init()
			return this.open
		},
		// set监听变化
		set: functin(val){
			// 双向绑定
			this.$emit('update:open', val)
		}
	}
},
// 方法二：或者监听visible变化 获取反填数据  
//watch: {
   // visible(val) {
    //  if (val) {
    //    this.cateType = this.item.cateType 
    //  }
   // }
//  },
methods: {
	init() {
		if (!this.open) {
        	return
      	}
	}
}