typescript - 在Vue/Nuxt中对局部属性进行突变( typescript )

Question

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

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"
什么是执行此任务的正确方法？

Answer 1

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

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

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

由于您使用的是 typescript ，因此您的数据应如下所示:

export default class extends Vue {
  showLogo: boolean = true

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