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

错误输出为您提供了良好的提示。你永远不应该直接改变组件内部的道具。道具只能由模板中的父组件访问，如下所示：

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

如果你想从组件内部获得一个可变的值，请按照你的错误告诉你：“相反，根据prop的值使用数据或计算属性。”

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

export default class extends Vue {
  showLogo: boolean = true

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

在Vue / Nuxt（typescript）中改变局部属性

1 个答案: