您现在的位置是：网站首页> 编程资料编程资料
关于vue-property-decorator的基础使用实践_vue.js_
2023-05-24
342人已围观
简介 关于vue-property-decorator的基础使用实践_vue.js_
vue-property-decorator帮助我们让vue支持TypeScript的写法，这个库是基于 vue-class-component库封装实现的。
注：以下环境为 vue2.x + typescript
基本使用
基础模板
和原来的vue单文件组件写法对比，template和css区域写法不变，只是script部分的写法有变化。
lang="ts"表示当前支持语言为Typescript@Component表示当前类为vue组件export default class HelloWorld extends Vue表示导出当前继承vue的类
data数据定义
export default class HelloWorld extends Vue { msg: string = ""; }data中数据属性在类中声明为类属性即可
生命周期钩子
export default class HelloWorld extends Vue { created(): void { } }所有生命周期钩子也可以直接声明为类原型方法，但不能在实例本身上调用他们
method方法
export default class HelloWorld extends Vue { initData(): void { } }method里面的方法在类中直接声明为类原型方法即可
计算属性
计算属性声明为类属性 getter/setter
其他选项
对于其他选项，将他们传递给装饰器函数
装饰器函数
@Component
@Component可以接收一个对象，注册子组件
import { Component, Vue, Ref } from 'vue-property-decorator'; import HelloWorld from '@/components/HelloWorld.vue'; @Component({ components: { HelloWorld, }, }) export default class HomeView extends Vue { }如果我们使用Vue Router时，希望类组件解析他们提供的钩子，这种情况下，可以使用 Component.registerHooks注册这些钩子
This is an about page
建议将注册代码写在单独的文件中，因为我们必须在任何组件定义之前注册他们。import将钩子注册的语句放在主文件的顶部来确保执行顺序
// class-component-hooks.ts import { Component } from 'vue-property-decorator' // Register the router hooks with their names Component.registerHooks([ 'beforeRouteEnter', 'beforeRouteLeave' ])// main.ts import './class-component-hooks' import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App) }).$mount('#app')@Prop
@Prop(options: (PropOptions | Constructor[] | Constructor) = {})Constructor，指定 prop 的类型，例如 String，Number，Boolean等Constructor[]，指定 prop的可选类型PropOptions，指定 type，default，required，validator等选项
属性的 ts 类型后面需要设置初始类型 undefined，或者在属性名后面加上!，表示非null和非undefined的断言，否则编译器给出错误提示
父组件
// Test.vue
子组件
// TestChildren.vuemyname: {{ name }}
age: {{ age }}
sex: {{ sex }}
@PropSync
@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})@PropSync装饰器接收两个参数：
propName：string，表示父组件传递过来的属性名options：Constructor | Constructor[] | PropOptions与@Prop的第一个参数一样
@PropSync会生成一个新的计算属性，所以@PropSync里面的参数名不能与定义的实例属性同名，因为prop是只读的
@PropSync与@Prop的区别是使用@PropSync，子组件可以对 peops 进行更改，并同步到父组件。
使用 @PropSync需要在父组件绑定props时使用 .sync修饰符
父组件
gender: {{ gender }}
子组件
myGender: {{ myGender }}
@Emit
@Emit(event?: string)
- @Emit装饰器接收一个可选参数，该参数是$emit的第一个参数，作为事件名。如果第一个参数为空，@Emit修饰的事件名作为第一个参数，$emit会将回调函数的camelCase转化为kebab-case
- @Emit会将回调函数的返回值作为 $emit的第二个参数。如果返回值是一个Promise对象，$emit会在Promise对象状态变为resolved之后被触发
- @Emit回调函数的参数，会放在返回值之后，作为$emit参数
父组件
name：{{ name }}
子组件
// 上例@Emit相当于 changeName() { this.$emit("changeName", this.value); }@Emit() changeName(arg: string): string { return this.value; } // 相当于 changeName(arg) { this.$emit("changeName", this.value, arg); }@Emit("change-name") change(arg: string): string { return this.value; } // 相当于 change(arg) { this.$emit("changeName", this.value
点击排行
本栏推荐
