VUE生命周期Created和Mounted

本文链接： https://blog.csdn.net/weixin_41127584/article/details/102566076

created 是加载DOM,html之后就马上执行, 比如初始化,获取屏幕高度调整,赋值等等,而mounted就是执行包括js之后,准备开始调用方法,也就是说类似传统开发那样,先加载jquery 再调用插件.

created() {
			if(this.IfAdd==false){
				this.form.enterpriseName=this.currentRow.enterpriseName,
				this.form.enterpriseCode=this.currentRow.enterpriseCode,
				this.form.creditCode=this.currentRow.creditCode,
				this.form.legalPerson=this.currentRow.legalPerson,
				this.form.registrationAddress=this.currentRow.registrationAddress,
				this.form.telephone=this.currentRow.telephone,
				this.form.taxNumber=this.currentRow.taxNumber,
				this.form.openingBank=this.currentRow.openingBank,
				this.form.bankAccount=this.currentRow.bankAccount,
				this.form.mailingAddress=this.currentRow.mailingAddress,
				this.form.contacts=this.currentRow.contacts,
				this.form.contactsPhone=this.currentRow.contactsPhone,
				this.form.enterpriseRegistTime=this.currentRow.enterpriseRegistTime,
				this.form.licenseURL=this.currentRow.licenseURL,
				this.form.addName=this.currentRow.addName
			}
		}

这是一个vue表格页面用引用的一个新增，编辑复用子组件created，组建创建后判断IfAdd，决定是否回显数据，若IfAdd==false，调用父组件props传过来的表格选中行数据currentRow

<AddEditDialog :visible.sync="visible" @changeVisible="changeVisible" :IfAdd="IfAdd" :currentRow="currentRow" v-if="visible"></AddEditDialog>

v-if=“visible”，点击按钮时调用子组件显示，不显示时可以销毁组建数据，

			//新增
			add(){
				this.visible = true
				this.IfAdd = true
			},
			//编辑
			edit(){
				this.visible = true
				this.IfAdd = false
			},
			//改变visible值
			changeVisible(){
				this.visible = false
			}

子组件props如下

props: {
			title: String,
			visible: {
				type: Boolean,
				default: false
			},
			IfAdd:{
				type: Boolean,
				default: true
			},
			currentRow:Object
		},

注意数据格式一致，而Mounted主要为页面加载时调用function，如

mounted() {
			const data = {
				keyWord:''
			}
			this.$store.dispatch('getEnterpriseList',data)
			// this.getExportBussiness(data)
		}

调用store action中getEnterpriseList的方法获取表格数据

VUE生命周期Created和Mounted

猜你喜欢