Business scene:
Click the Add button to fill in the input of the form. When the pop-up box is reopened, the content of the pop-up box needs to be reset.
Or when implementing the reset button function, some data needs to be blanked.
Vue2 writing method
It is implemented through the built-in method of vue2.
//this.$data Get the data in the current state
//this.$options.data() Get the data in the initial state of the component
Object.assign(this.$data, this.$options.data())
Vue3 writing method
//定义一个函数把需要的值return出来
const dataDefault = () => {
return {
formData: {
data: ''
},
searchData: {
data: ''
}
}
}
//把返回值进行reactive,然后得到数据
const state = reactive(dataDefault())
//重置按钮
const resetClick = () => {
// state.formData 当前值 dataDefault().formData 页面初始进入时设置的值
// 该步操作把初始值重新赋值给当前值,达到重置对象值的目的。
Object.assign(state.formData, dataDefault().formData);
}