Vue2 と Vue3 では、Object.assign() メソッドを使用して、オブジェクト データを初期化または空にします。

ビジネスシーン:

[追加] ボタンをクリックして、フォームの入力を入力します。ポップアップ ボックスを再度開くと、ポップアップ ボックスの内容をリセットする必要があります。
または、リセット ボタン機能を実装する場合、一部のデータを空白にする必要があります。

Vue2の書き方

これは、vue2 の組み込みメソッドを通じて実装されます。

//this.$data 現在の状態のデータを取得します

//this.$options.data() コンポーネントの初期状態のデータを取得する

Object.assign(this.$data, this.$options.data())

Vue3の書き方

//定义一个函数把需要的值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);
}

おすすめ

転載: blog.csdn.net/m54584mnkj/article/details/129046802