改变 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"

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

Answer 1

错误输出给了你一个很好的提示。你不应该直接从组件内部改变 props。道具只能由模板中的父组件访问，如下所示：

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

如果你想要一个从组件内部可变的值，按照你的错误告诉你的去做："Instead, use a data or computed property based on the prop's value."

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

export default class extends Vue {
  showLogo: boolean = true

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

改变 Vue / Nuxt 中的本地属性（打字稿）

Mutating local properties in Vue / Nuxt (typescript)

typescript

vue.js

vue-component

nuxt.js