而是使用基於道具值的數據或計算屬性。 Vue公司JS

Question

嗯，我試圖改變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" 

我不知道如何解決這個問題...

我file.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> 

任何一個可以幫助我嗎？謝謝

Answer 1

警告很清楚。在您的changeValue方法中，您正在更改財產的價值，menuOpen。這會將內部值更改爲該組件，但是如果組件必須由於任何原因而重新渲染，則無論值是否在以內，組件都將被當前狀態覆蓋，該組件將在外部之外。

通常情況下，您通過製作內部使用值的副本來處理此問題。

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) 
}