相反，使用基于道具值的数据或计算属性。 Vue JS

Posted 2023-02-23

【中文标题】相反，使用基于道具值的数据或计算属性。 Vue JS

【英文标题】：Instead, use a data or computed property based on the prop's value. Vue JS

【发布时间】：2017-10-13 01:51:50

【问题描述】：

好吧，我正在尝试更改 Vue 中“变量”的值，但是当我单击按钮时，它们会在控制台中抛出一条消息：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "menuOpen"

我不知道如何解决这个问题...

我的文件.vue：

<template>
  <button v-on:click="changeValue()">ALTERAR</button>
</template>

<script>

export default 
  name: 'layout',
  props: [ 'menuOpen' ],
  methods: 
    changeValue: function () 
      this.menuOpen = !this.menuOpen
    
  ,


</script>

任何人都可以帮助我吗？谢谢

【参考方案1】：

警告很清楚。在您的changeValue 方法中，您正在更改属性menuOpen 的值。这将改变组件内部的值，但是如果 parent 组件由于任何原因必须重新渲染，那么无论 inside 的值如何，组件都将被覆盖当前状态在组件之外。

通常，您通过复制值供内部使用来处理此问题。

export default 
  name: 'layout',
  props: [ 'menuOpen' ],
  data()
      return 
          isOpen: this.menuOpen
      
  ,
  methods: 
    changeValue: function () 
      this.isOpen= !this.isOpen
    
  ,

如果您需要将值的更改传达回父级，那么您应该 $emit 更改。

changeValue: function () 
    this.isOpen= !this.isOpen
    this.$emit('menu-open', this.isOpen)

【讨论】：

我以为我已经做到了，我看了很多教程并没有得到！谢谢老兄。

或者，从 v2.3 开始，您可以使用 .sync 修饰符：vuejs.org/v2/guide/components.html#sync-Modifier

如果使用 props 和 data，props 会被初始化一次，data 会不断变化。这样可以吗？