Question

我怎么知道我的物品是否被道具重新检查过？

实施例

我有一个通过道具传递的对象，如：

object:{
 id: 1,
 list: [{..},{..}],
 propertyExample: true,
 message: "I know that You will change this input"
}

在我的html前端，我有一个输入可以改变消息的值或其他属性，如：

<input type="text" v-model="object.message" />

我会在我的整个原始对象＆＃34; （通过道具传递）改变了。如果我深入研究问题正如文档所说：

注意：当变异（而不是替换）一个Object或一个数组时，旧值将与新值相同，因为它们引用了相同的对象/数组。 Vue没有保留pre-mutate值的副本。

所以我有一个由道具检索的对象，所以我应该＆＃34;禁用＆＃34;如果对象等于＆＃34;原始＆＃34;保存按钮或＆＃34;启用＆＃34;如果对象不同，那么如果我在前端进行更新，比如修改属性。

所以如果我输入一个包含我的组件的页面，我有原始对象，如上所述，我的保存按钮被禁用，因为＆＃34;对象＆＃34;没有改变。

如果我更改了我的对象的某个属性，我会启用我的保存按钮。例如，如果我在所描述的属性列表数组中添加对象，或者我是否更改了属性消息，或者是否添加了新属性。

Answer 1

当props对象中的某个属性发生更改时，将调用Watch函数。

您还可以使用“v-bind”将对象的所有属性作为props传递：所以

<demo v-bind="object"></demo>

将等同于

<demo :id="object.id" :list="object.list" :propertyExample:"object.propertyExample" :message="object.message"></demo>

然后，您可以单独观看消息道具以进行更改。

修改

您也可以使用Vue Instance Properties。

您可能希望在许多组件中使用数据/实用程序，但您不希望污染全局范围。在这些情况下，您可以通过在原型上定义它们来使它们可用于每个Vue实例：

Vue.prototype.$appName = 'My App'

现在$ appName在所有Vue实例上都可用，甚至在创建之前。如果我们运行：

new Vue({ beforeCreate: function () { console.log(this.$appName) } })

Answer 2

帮我澄清你的问题。因此，您有父组件将此Object传递给子组件，子组件模板将此输入与v-model一起使用。在哪个组成部分，你想知道什么？

Answer 3

将观察者添加到通过的道具。并在改变时做点什么。

watch: {
  passedProp(changedObject) {
      //do something...
      change the variable which stands for enabling the "SAVE" button
  }
}

如果您不使用webpack / babel

watch: {
      passedProp: function(changedObject) {
          //do something...
          change the variable which stands for enabling the "SAVE" button
      }
    }

如何知道在Propue中传递的Object是否在Vuejs中发生了变化

3 个答案: