在 Vue JS 中捕获组件更改的 props 数据答案

【问题标题】：Catch props data on component change in Vue JS在 Vue JS 中捕获组件更改的 props 数据
【发布时间】：2020-12-02 04:05:44
【问题描述】：

我创建了一个模态框组件并使用道具将数据传递给它。在这个组件中，我想仅在打开（显示）模式时将此道具数据捕获到 vue data() 方法中。我该怎么做？

我采用的一种有效方法是使用updated() 事件，如下面的代码，但我意识到它在全球范围内运行，而不仅仅是在组件更新时。

export default {
  props: ['widget_data'],

  data() {
    return {
      new_data: {},
    }
  },

  methods: {
    hideMe() {
      this.$emit('closeClicked')
    },
    saveMe() {
      this.$emit('saveClicked')
    },
  },

  updated() {
    this.new_data = this.widget_data
  },
}

【问题讨论】：

不确定您所说的 "updated() 在全球范围内运行" 是什么意思，但您也可以尝试为 widget_data 添加观察者？
您可以使用手表。检测打开的模态，然后当模态发生时您可以更新数据

标签： javascript vue.js

【解决方案1】：

你可以将 props 传递给 vue 观察者

 watch: {
   widget_data: function (val) {
     //here you can put logic to save updated value to data method
   }
 }

【讨论】：