在Vue / Nuxt中对局部属性进行突变（打字稿）

Question

我想拥有一个属性showLogo ，当我调用方法hideLogo()时可以将其设置为false 。

import Component from 'nuxt-class-component'
import Vue from 'vue'
import { Prop } from 'vue-property-decorator'
import Logo from '~/components/Logo.vue'

@Component({
  components: {
    Logo
  }
})

export default class extends Vue {
  @Prop({ default: true })
  showLogo: boolean

  hideLogo(): void {
    this.showLogo = false
  }
}

这会产生警告： [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: "showLogo" [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: "showLogo"

什么是执行此任务的正确方法？

Answer 1

错误输出为您提供了很好的提示。 绝对不要从组件内部直接更改道具。 道具只能由模板中的父组件访问，如下所示：

<template>
  <your-component :show-logo="true">
<template>

如果您希望在组件内部具有一个可变的值，请按照错误提示进行操作： “相反，请根据prop的值使用数据或计算属性。”

由于您使用的是打字稿，因此您的数据应如下所示：

export default class extends Vue {
  showLogo: boolean = true

  hideLogo(): void {
    this.showLogo = false
  }
}