Vue JS如何纠正“避免直接改变道具”？

Question

我有一个带有按钮的主要组件视图：

    <mdb-btn
                      color="light-blue"
                      outline="white"
                      rounded
                      @click="showLoginRegister = true"
                      icon="users"
                      iconRight
                  >Inscription / Connexion</mdb-btn>

  export default {
  name: "Landing",
  components: {
    ...
  },
  methods: {
  },
  data() {
    return {
      showLoginRegister: false
    };
  }
};

在这个父视图中有一个子组件（一个模态窗口）：

<modal-inscription :showLoginRegister="showLoginRegister"></modal-inscription>

在模态铭文组件中：

<mdb-modal :show="showLoginRegister" @close="showLoginRegister = false">...

我添加了一个 prop 属性：

props: ['showLoginRegister'],

当我单击按钮时，它会出现模式窗口，但我在 js 控制台中有此错误消息：“[Vue warn]: Avoid mutating a prop directly because the value will be overwritten when the parent component re-渲染。相反，使用基于道具值的数据或计算属性。道具正在变异：“showLoginRegister”

我理解该消息，但如何通过在子组件中使用局部变量来避免它？

或者也许我不使用 rignt 方法... 感谢您的帮助

Answer 1

我不确定您的结构，但您可以获得与以下相同的结构，并且它应该以相同的方式工作，只需将 false 值发送给您的父母。
只需将数据发送回父级（来自子级的$emit）并更新父级中的给定道具！文档中有关此模式的更多信息：https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

computed setters 也可能有所帮助，但理解起来有点复杂，所以最好坚持一个基本的用例。 v-model syntax on components 也是如此。

---

您需要在组件之间建立 props/emit（也称为父/子）关系，例如

Parent.vue

<template>
  <div>
    <child :name="name" @update-name="updateName"></child>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'bob',
    }
  },
  methods: {
    updateName(newName) {
      this.name = newName
    },
  },
  components: {
    Child: () => import('./components/child'),
  },
}
</script>

Child.vue

<template>
  <div>
    <p>{{ name }}</p>
    <button @click="changeName">append nice</button>
  </div>
</template>

<script>
export default {
  props: ['name'],
  methods: {
    changeName() {
      this.$emit('update-name', this.name + ' nice')
    },
  },
}
</script>

Michael Thiessen 也就此发表了一篇博文：https://michaelnthiessen.com/avoid-mutating-prop-directly/

Answer 2

正如警告消息所说 - 如果您更改道具，它不会影响父数据，并且在父组件重新渲染后，您的道具将被覆盖。 为避免这种情况，您应该从子组件中 $emit 事件并在父组件中更改 prop。

<mdb-modal :show="showLoginRegister" @close="$emit('close-login')">

    <mdb-btn
                      color="light-blue"
                      outline="white"
                      rounded
                      @click="showLoginRegister = true"
                      icon="users"
                      iconRight
                      @close-login="showLoginRegister = false"
                  >Inscription / Connexion</mdb-btn>

  export default {
  name: "Landing",
  components: {
    ...
  },
  methods: {
  },
  data() {
    return {
      showLoginRegister: false
    };
  }
};

您也可以使用 Vuex、Event Bus 或 $root/$parent 直接在组件之间进行通信。