在Vuejs中更改注入元素时出错？

由 发布于 javascripttypescriptvue.jsvue-componentvue-mixin
 收藏

我需要将此代码从用javascript编写的mixins转换为打字稿，但是进行更改时会出现错误，这很明显，因为我正在分配标题值。如何将我的代码正确转换为打字稿。

警告：由于更改，避免直接更改注入的值   只要提供的组件重新渲染，就会被覆盖。   注入被突变：“标题”

这是原始的mixin（javascript）

export default {
  name: 'Heading',

  inject: {
    heading: {
      default: () => ({ align: 'left' }),
    },
  },

  provide () {
    return {
      heading: {
        align: this.align,
      },
    }
  },

  props: {
    align: {
      type: String,
      default () {
        return this.heading.align
      },
    },
  },

  computed: {
    justify () {
      switch (this.align) {
        case 'center': return 'center'
        case 'right': return 'end'
        default: return 'start'
      }
    },
  },
}

这是我在打字稿中的版本

import {Component, Prop, Inject, Provide, Vue} from 'vue-property-decorator';

@Component
export default class Heading extends Vue {
  @Inject({default: () => ({align: 'left'})}) heading!: any;
  @Prop({type: String, default() {return this.heading.align}}) public align: string;
  // @ts-ignore
  @Provide()  heading = {align: this.align} // error in the same identifier so use @ts-ignore

  public get justify() {
    switch (this.align) {
      case 'center':
        return 'center'
      case 'right':
        return 'end'
      default:
        return 'start'
    }
  }
}

我的代码有效，但浏览器控制台中的错误继续。关于如何将mixin转换为打字稿而又不会在浏览器控制台上抛出错误的任何想法。

通过应用程序，mixin还用于其他几个组件中。我希望你能帮帮我

评论