Question

这个问题可能看起来很基本（可能是因为），但是由于某些原因，我很难弄清楚如何处理它。基本上，我有一个传递给Vue组件的属性，该属性指示组件中的某些样式差异。话虽如此，我在组件内部有一个按钮想要更改此属性。显然，使用Vue，我无法直接更改父属性值（Vue生气），但是我不知道如何在不使用初始属性值的情况下计算动态属性，这将使其无法更改。我敢肯定有一个简单的解决方案，所以希望有人能指出我的愚蠢。

（为简单起见，我删除了该组件的其余部分，因为此问题仅涉及几部分

以下是组件：

<template>
    <div>
      <button type="button" :style="{
           backgroundColor: isSaved ? 'gray' : '#68AEFA',
      }" v-on:click="savePost()">
         {{ isSaved ? 'Unsave' : 'Save' }} 
      </button>
    </div>
</template>
<script>
   export default {
      props: ['saved'],
      methods:{
        savePost: function() {
           // Want to change value of isSaved here
        },
      },
      computed: {
         isSaved: function () {
             if (this.saved == '0') {
                return false
             } else {
                return true
             }
         }
      },
   }
</script>

希望上面的代码能更好地说明我的描述。本质上，isSaved取决于属性“ saved”的初始值，该属性从中推导出其值。由于Vue不允许我直接更改save的值，因此我初始化了另一个变量isSaved，该变量是根据保存的初始属性值计算得出的，但是如果isSaved的值基于'saved'的值，该如何更改呢？< / p>

再次，很抱歉这个问题很愚蠢，但是我在Vue文档中看不到我该怎么做的任何事情，因为它依赖于页面加载的计算属性，而没有过多描述如何处理调整值。

Answer 1

我知道这已经是一个可以接受的答案，但是我个人认为添加功能作为道具应该是一种反模式。它将起作用，但是却以错误的方式使我感到困惑。

您之前走在正确的道路上。根据Vue documentation的说法，有两种情况很容易诱变道具

通常在两种情况下诱使道具变异：

该道具用于传递初始值；子组件以后希望将其用作本地数据属性。在这种情况下，最好定义一个使用prop作为其本地数据属性初始值：

@bind-value

该道具作为需要转换的原始值传入。在在这种情况下，最好使用道具的值：

UserName

我认为您最好使用较早的方法。在我看来，将功能作为道具传递会有些混乱。

编辑--- article证实了我关于将函数作为道具传递的直觉。这是一个坏主意。本文提供了替代方法。我建议你读一读。

Answer 2

使用计算属性时，您有2个内部方法get和set，但是在这种情况下，您的计算属性从props反映出来，因此，如果您重新渲染父组件，它将被设置回父值，在这种情况下为"0"。

您可以从父级发送一种方法来使用道具更改值。

<template>
    <ChildComponent  :save="save" :isSaved="isSaved"/>
</template>

<script>

export default {
   name: "ParentComponent"
   data() {
      return {
         isSaved: false
      }
   }
    methods: {
       save() {
          this.isSaved = true;
       }
    }
};
</script>

您只需要在子组件中将save属性设置为函数并调用它即可。

<template>
    <button
        type="button"
        :style="{
           backgroundColor: isSaved ? 'gray' : '#68AEFA',
      }"
        @click="save()"
    >{{ isSaved ? 'Unsave' : 'Save' }}</button>
</template>

<script>

export default {
   name: "ChildComponent",
   data() {
      return {
         saved: false
      }
   }
   computed: {
      uniqueSaveStatus: {
         get() {
            return this.saved
         },
         set(v) {
            this.saved = v
         }
      }
   }
   props: {
      isSaved: Boolean,
      save: { type: Function }
   }
};
</script>

因此，如果您确实需要isSaved变量是唯一的，则需要像uniqueSaveStatus这样在childComponent中对其进行定义。

Vue-更改计算的属性值而不更改父属性值

2 个答案: