一文秒懂vue-property-decorator

一文秒懂vue-property-decorator攻略

这篇文章主要介绍了如何使用 vue-property-decorator 来简化 Vue 组件开发中的代码，包括如何使用装饰器来定义 props、computed、methods 等属性和方法，以及如何使用 watch 和 emit 方法来实现组件间的通信。

1. 什么是 vue-property-decorator

vue-property-decorator 是一个基于 Typescript 的装饰器库，它可以帮助我们简化 Vue 组件开发中的代码。它提供了一些装饰器来定义组件中的属性和方法，这些装饰器包括 @Prop、@Computed、@Method、@Watch、@Emit 等。使用这些装饰器可以让我们更方便地定义、组织组件，提高代码复用性和可读性。

2. 如何使用 vue-property-decorator

首先，我们需要安装 vue-property-decorator 库。可以使用 npm 或 yarn 进行安装：

npm install vue-property-decorator

或者

yarn add vue-property-decorator

然后，在 Vue 组件中引入 vue-property-decorator 库，并使用其中的装饰器来定义组件中的属性和方法，例如：

// 引入vue-property-decorator库
import { Vue, Component, Prop, Watch, Emit } from 'vue-property-decorator'

// 使用@Component装饰器来定义组件
@Component({
  components: {}
})
export default class HelloWorld extends Vue {
  // 使用@Prop装饰器来定义props属性
  @Prop()
  private msg!: string

  // 使用@Watch装饰器来定义watcher回调函数
  @Watch('msg')
  onMsgChanged(newVal: string, oldVal: string) {
    console.log(`msg changed from ${oldVal} to ${newVal}`)
  }

  // 使用@Emit装饰器来定义emit事件
  @Emit()
  onBtnClick() {
    console.log('clicked')
  }
}

这里演示了如何使用 @Prop、@Watch、@Emit 装饰器来定义组件中的 props 属性、观察属性、事件等。

3. 示例

示例一：定义一个简单组件

<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="onBtnClick">click me</button>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  @Prop()
  private msg!: string

  @Emit()
  onBtnClick() {
    console.log('clicked')
  }
}
</script>

这是一个简单的组件示例，其中使用了 @Prop 装饰器来定义 msg 属性，使用了 @Emit 装饰器来定义 onBtnClick 事件。这样就可以在父组件中使用 v-bind 绑定 msg 属性，使用 @onBtnClick 来监听 onBtnClick 事件。

示例二：定义一个带有计算属性的列表组件

<template>
  <div>
    <ul>
      <li v-for="item in filteredItems">{{ item }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Computed } from 'vue-property-decorator'

@Component
export default class MyList extends Vue {
  @Prop({ type: Array })
  private items!: string[]

  @Prop({ type: String, default: '' })
  private keyword!: string

  @Computed
  get filteredItems(): string[] {
    return this.items.filter(item => item.toLowerCase().includes(this.keyword.toLowerCase()))
  }
}
</script>

这是一个带有计算属性的列表组件示例，其中使用了 @Prop 装饰器定义了 items 和 keyword 两个属性，并使用 @Computed 装饰器定义了一个计算属性 filteredItems，用于根据 items 和 keyword 来动态计算出过滤后的列表数据。在父组件中可以使用 v-bind 绑定 items 和 keyword 属性，然后可以在模板中访问 filteredItems 属性来显示过滤后的列表。