VUE + TS

 

 

安装:

?

1	npm i -S vue-property-decorator

　　

提示:

I: 首先安装上面两个模块
II: 使用相应的模块,引入对应的模块

**

01: @Prop 属性传递

**

**

?

1 2 3 4 5 6 7 8 9

// 使用: <h4> {{propA}} | {{propB}} | {{propC}}</h4>**   @Component export default class YourComponent extends Vue {   @Prop(Number) readonly propA: number | undefined;                          // 传入propA : Number类型, 要是没有传入,则使用undefined类型   @Prop({ default: 'default value' })  readonly propB!: string;             // 传入propB : 设置默认值, ! 表示(防止编译器,不能排除null | undefined类型,手动去除)值不能是null | undefined   @Prop([String, Boolean]) readonly propC: string | boolean | undefined;     // 传入propC :  Number,或者布尔类型, 要是没有传入,则使用undefined类型

　　

 

 

等价

?

1 2 3 4 5 6 7 8 9 10 11 12

props: {     propA: {       type: Number;     };     propB: {       default: 'default value';     };     propC: {       type: [String, Boolean];     };   }; }

　　

 

**

02: @PropSync 属性传递,将传递的是作为依赖,供计算属性使用

**

?

1 2 3 4 5 6 7

// 使用: <h4> {{syncedName}}</h4>   @Component export default class YourComponent extends Vue {   @PropSync('name', { type: String }) syncedName!: string // 传入name : String类型  => syncedName为计算属性,依赖于name值  (syncedName名字随便起,不能于name重名,否则报错) }

　　

 

 

等价

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

props: {    name: {       type: String    } },    computed: {   syncedName: {      get() {         return this.name      },      set(value) {         this.$emit('update:name', value)      }   } }

　　

 

 

03:@Watch 监测值

**

?

1 2 3 4 5 6 7 8 9 10 11

@Component export default class YourComponent extends Vue {   @Watch('child')                                       // 监测的值   onChildChanged(val: string, oldVal: string) {}        // 值发生变化时候,触发的函数       @Watch('person', { immediate: true, deep: true })     // 监测preson值,进行深度监测   onPersonChanged1(val: Person, oldVal: Person) {}       @Watch('person2')   onPersonChanged2(val: Person, oldVal: Person) {} }

　　

等价

?

1 2 3 4 5 6 7 8 9 10 11 12 13

watch: {  child: function( newVal, oldVal){ ...... },  person:{    deep:true,    immediate: true,    handler(newValue, oldValue) {.....}  },  person2:{    deep:true,    immediate: false,    handler(newValue, oldValue) {.....}  } }

　　

**

04:@Provide @Inject 注入数据

**

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 使用 <h4> {{foo}} | {{keyname}} | {{aliasOptional}}</h4>   @Component export class MyComponent extends Vue {     // 01   @Provide() foo = 'foo' // 注入   @Inject() readonly foo!: string // 子组件,获取foo           // 02: 传入key   @Provide('key') anys = 'foo' // 注入   @Inject('key') readonly keyname!: string // 子组件,获取keyname       // 03: 使用默认    @Provide('optional') anys = 'foo' // 注入    @Inject({ from: 'optional', default: 'default' }) readonly aliasOptional!: string  // 子组件,获取optional =>  from:来自哪个字段,父组件未传入该字段, default默认值 }

　　

 

 

**

05:@ProvideReactive@InjectReactive 响应注入数据(由于@Provide @Inject对注入的字符串,不响应数据变化,对象除外)

**

?

1 2 3 4 5 6

// 使用 <h4> {{anys }}</h4>   // 建议在 anys这块的命名,子组件接收到的时候,名字一致方便查看 @ProvideReactive('key') anys = 'foo' // 注入 @InjectReactive('key')  anys !: string // 获取

　　

 

 

**

06:@Emit 触发事件

**

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// 使用   // I: 函数有返回值 => 返回值作为devEvent函数接收到的参数 <Componet @devData='devEvent' ></Componet> @Emit('devData') // 名字一致   devData() {     return 10   }     // II: 函数没有返回值 => 参数arg作为devEvent函数接收到的参数 <Componet @devData='devEvent' ></Componet> @Emit('devData') // 名字一致   devData(arg) {}   // III: 不传事件名 => 父组件名字必须小写并且分开,不然无效,其参数遵循上面所说 <Componet @dev-data='dev-event' ></Componet> @Emit() // 不传名字   devData(arg) {}     1

　　

 

 

07:@Ref 绑定的DOM

使用: this.ruleFormDOM
以element ui为例, 需要指定接口类型

?

1 2	import { Form } from 'element-ui'; @Ref('ruleFormDOM') readonly ruleFormDOM: Form;

　　

 

08:计算属性 get set

?

1 2 3

get desTableDataLength() {     return this.desTableData.length - 1; }

　　

 

 

08: @Component 组件引入

I: 装饰器方式

?

1 2 3 4

@Component export class MyComponent extends Vue {    ..... }

　　

 

 

II: 装饰器函数

?

1 2 3 4 5 6 7 8 9

@Component({   components: {     Add: () => import('./Add.vue'),     Edit: () => import('./Edit.vue'),     Detail: () => import('./Detail.vue'),     Import: () => import('./Import.vue'),     Export: () => import('./Export.vue')   } })