记录 vue-property-decorator 基础用法

vue-property-decorator用法

vue-property-decorator地址
vue-class-component

• vue-class-component：是vue下的一个库，可以让你用类样式的语法创建Vue组件
• vue-property-decorator：为了使vue2更好的支持typescript的写法，完全基于vue-class-component封装的组件。

安装：

npm i -S vue-property-decorator

常用的几个方法

@Component
@Emit
@Inject
@Provice
@Prop
@Watch
@Model

@Component(options:ComponentOptions = {})

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; // 引入库
import TheSonComponent from '@/components/TheSonComponent.vue'; // 子组件
// Component装饰器，接受一个对象参数
// 可声明`components ，filters，directives，computed，watch`等未提供装饰器的选项
@Component({
    components: {
        TheSonComponent,
    },
    name: 'MyComponent',
})
class MyComponent extends Vue {
	....逻辑
}
export default MyComponent;
</script>

// main.js文件
// 使用Component注册全局路由钩子函数
import { Vue, Component } from 'vue-property-decorator';
Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave', 'beforeRouteUpdate']);
new Vue({
    render(h) {
        return h(App);
    },
    router,
    store,
}).$mount('#app');

@Emit(event?: string)

@Emit 装饰器接收一个可选参数，该参数是$Emit的第一个参数，充当事件名。如果没有提供这个参数，$Emit会将回调函数名的camelCase转为kebab-case，并将其作为事件名；
@Emit会将回调函数的返回值作为第二个参数，如果返回值是一个Promise对象，$emit会在Promise对象被标记为resolved之后触发；@Emit的回调函数的参数，会放在其返回值之后，一起被$emit当做参数使用。

// 子组件TheSonComponent.vue
<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator'; // 引入库
@Component
class TheSonComponent extends Vue {
    // 场景1
    // 触发父组件on:add事件，执行addClick回调函数，并将值返回父组件
	@Emit('on:add') private addClick() { ... }; 
    // 场景2
    // Emit没有传入参数，默认使用回调函数addCount转为add-count为事件名触发，将值返回父组件。
    @Emit()
    addCount() { ... };
}
export default TheSonComponent;
</script>

@Provide(key?: string | symbol) / @Inject(options?: { from?: InjectKey, default?: any } | InjectKey) decorator

提供/注入装饰器,对父子组件、兄弟组件以及多层组件嵌套的其中一种传值方式，key可以为string或者symbol类型。

// 外层ParentComponent组件
<script lang="ts">
import { Component, Vue, Provide } from 'vue-property-decorator'; // 引入库
@Component({
    components: {
        TheSonComponent,
    },
    name: 'ParentComponent'
})
class ParentComponent extends Vue {
    @Provide() foo = 'provide默认方式声明';
    @Provide('标识key') foo2 = '带有标识方式声明';
}
export default ParentComponent;
</script>

// TheSonComponent子组件或多层组件嵌套
<script lang="ts">
import { Component, Vue, Inject } from 'vue-property-decorator'; // 引入库
@Component
class TheSonComponent extends Vue {
    @Inject() readonly foo!: string;
	@Inject('标识key') readonly foo2!: string;
	created() {
        console.log(this.foo) // provide默认方式声明
        console.log(this.foo2) // 带有标识方式声明
    }
}
export default ParentComponent;
</script>

@Prop(options: (PropOptions | Constructor[] | Constructor) = {})

// TheSonComponent子组件
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'; // 引入库
@Component
class TheSonComponent extends Vue {
    @Prop(String) readonly foo!: string; // 方法一：指定 prop 的类型, String，Number，Boolean等
	@Prop([String, Number]) readonly foo2!: string; // // 方法二：接受可选prop类型
	@Prop({required: true, default: 'default值', type: String}) readonly foo3!: string; // // 方法三：接受options选项，type，default，required，validator
	created() {
        console.log(this.foo)
        console.log(this.foo2)
        console.log(this.foo3)
    }
}
export default ParentComponent;
</script>

@Watch(path: string, options: WatchOptions = {})

path: 被监听的属性名； options： immediate、deep属性；

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

@Component
export default class TheSonComponent extends Vue {
    private name = '';

	private userInfo = {
        name: '';
        hospitalInfo: {
            hospitalId: 10000,
            hospitalName: '测试医院'
    }
    }

	// 场景一,默认监听方式
    @Watch('name')
    handleChangeName(newVal: string, oldVal: string) {
        console.log(newVal, oldVal);
    }
	
	// 场景二，增加监听选项
	@Watch('userInfo', { immediate: true, deep: true})
    handleChangeName(newVal: string, oldVal: string) {
        console.log(newVal, oldVal);
    }
}
</script>

@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})

@Model装饰器允许我们在一个组件上自定义v-model，接收两个参数

event：string事件名； options：定义类型

// TheSonComponent子组件
<script lang="ts">
import {Component, Vue, Model,} from 'vue-property-decorator';
 
@Component
export default class TheSonComponent extends Vue {
   @Model('change', { type: String }) readonly checked!: string
 
   public inputHandle(that: any): void {
     this.$emit('change', that.target.value);
   }
</script>