vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明

@Prop  父子组件之间传值

Install:

npm install --save vue-property-decorator

Child:

<template>
  <div>
      {{fullMessage}}
  </div>
</template>

<script lang="ts">

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

@Component({})
export default class Child extends Vue {
    message: string = "Hello";
    @Prop({
        type: String,
        default: 'Default Value'
    }) msg: string;

    get fullMessage() {
        return `${this.message},${this.msg}`;
    }
}
</script>

Parent:

<template>
  <div class="hello">
    <h1 v-colorDirective="{color: 'red', backgroundColor: 'blue'}">{{ message }}</h1>
    <button @click="clicked">Click</button>
    <ChildComp msg="'What a good day!'"/>
    <router-link to="/hello-ts">Hello Ts</router-link>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import colorDirective from '../color-directive';

import ChildComp from './Child.vue';

@Component({
  directives: {
    colorDirective
  },
  components: {
    ChildComp
  }
})
export default class Hello extends Vue {
  message: string = 'Welcome to Your Vue.js App'

  get fullMessage() {
    return `${this.message} from Typescript`
  }

  created() {
    console.log('created');
  }

  beforeRouteEnter(to, from, next) {
    console.log("Hello: beforeRouteEnter")
    next()
  }

  beforeRouteLeave(to, from, next) {
    console.log("Hello: beforeRouteLeave")
    next()
  }

  clicked() {
    console.log('clicked');
  }
}
</script>

@Model  数据双向绑定

Checkbox:

<template>
  <div>
      <input type="checkbox" :id="id" :checked=checked @change="changed"/> {{label}}
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop, Model } from 'vue-property-decorator'
@Component
export default class MyCheckbox extends Vue {
  @Prop() label: string
  @Prop() id: string

  @Prop()
  @Model('change') checked: boolean

  changed(ev) {
    this.$emit('change', ev.target.checked)
  }
}
</script>

Parent Component:

<template>
    <div>
        <MyCheckbox :label="checkbox.label" :id="checkbox.id" v-model="checkbox.checked"/>

        {{JSON.stringify(checkbox)}}
    </div>
</template>
<script lang="ts">

import Vue from 'vue'
import {Component} from 'vue-property-decorator'
import MyCheckbox from './MyCheckBox.vue'

@Component({
    components: {
        MyCheckbox
    }
})
export default class HelloTs extends Vue {

    checkbox = {
        label: 'Fancy checkbox',
        id: 'checkbox-id',
        checked: true
    }
}
</script>

@Watch  监听数据变化

<template>
  <div class="hello">
    <button @click="clicked">Click</button> {{sum.acum}}
  </div>
</template>

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

@Component({
})
export default class Hello extends Vue {

  sum = {
    acum: 0
  }
  @Watch('sum', {deep: true})
  watchCount(newVal, oldVal) {
    console.log("newVal", newVal, "oldVal", oldVal)
  }

  clicked() {
    this.sum.acum++;
  }
}
</script>

@Provide  提供  /  @Inject  注入

当您希望从父组件到子组件提供一些服务或数据时，您可以使用@Provide和@Inject。

Parent component:

<template>
  <div class="hello">
    <ChildComp :msg="'What a good day!'"/>
  </div>
</template>

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

import ChildComp from './Child.vue';

@Component({
})
export default class Hello extends Vue {

  @Provide('users')
  users = [
    {
      name: 'test',
      id: 0
    }
  ]

}
</script>

Child:

<template>
  <div>
      {{users}}
  </div>
</template>

<script lang="ts">

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

@Component({})
export default class Child extends Vue {
    message: string = "Hello";

    @Inject('users') users;
}
</script>

在 TypeScript 中创建 自己的修饰器

定义一个修饰器：

const Log = (msg) => {
  return createDecorator((component, key) => {
    console.log("#Component", component);
    console.log("#Key", key); //log
    console.log("#Msg", msg); //App
  })
}

使用：

@Log('fullMessage get called')
get fullMessage() {
  return `${this.message} from Typescript`
}

输出：

#Component Object {directives: Object, components: Object, name: "Hello", methods: Object, computed: Object…}
#Key fullMessage
#Msg fullMessage get called

.