如何计算方法中的变异数据？

Question

我在 Vue 3 上。我有一个 onclick 方法，它应该修改我的 props 的值，它是一个布尔值，我尝试了几种方法，我设法输入了计算方法，但是我的 props 的值不变

我注册了我的数据

data() {
 return {
  showConsommationWindow: false
 }
}

然后我尝试了 3 种方法来更改值，但都没有奏效。 第一个：

<submit-button v-on:click="showConsommationWindow = true" />

第二个：（警报执行但数据值不变）

<submit-button v-on:click="showConsommation(true)"/>

  methods: {
    showConsommation(boolValue){
        alert('false')
        this.showConsommationWindow = boolValue;
      }
  }

最后一个：

<submit-button v-on:click="showConsommation"/>

  methods: {
    showConsommation(){
      if (!this.showConsommationWindow) {
        alert('false')
        this.showConsommationWindow = true;
        return
      }
      this.showConsommationWindow = false;
    }
  },

我真的不明白为什么我的数据不能变异，谢谢你的帮助。

Answer 1

如果 value 来自 props，则意味着 parent 将布尔值分配给 component。所以如果你想改变布尔值，你应该这样做：

// in parent

<Component :booleanValue="myBoolean" @changeBooleanValueEvent="changeMyBoolean" />

...

data() {
  return {
    myBoolean: true
  }
}

methods: {
  changeMyBoolean(value) {
    this.myBoolean = value
  }
}

// in component

props: {
  booleanValue: {
    ...
  }
}

methods: {
  showConsommation() {
    this.$emit('changeBooleanValueEvent', false)
  }
}