VUE-プロパティデコレータの使用法

ライブラリをVUE-プロパティデコレータに完全に依存しているVUEクラスコンポーネントなので、このライブラリを使用する前に、関係なく、それデコレータために何が起こっているか、それを読んでいないしてください

VUE-プロパティデコレータ

このコンポーネントは、に完全に依存しvue-class-component、それは、次のプロパティがあります。

@Component（完全継承vue-class-component）
@Emit
@Inject
@Provice
@Prop
@時計
@Model
（中ミックスインvue-class-componentの定義）。

使用

私たちは、ときにvue1つのファイルを使用してTypeScript導入したときvue-property-decoratorの後にscriptラベルは、このようになります。

<script lang="ts"> import {Vue, Component} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ ValA: string = "hello world"; ValB: number = 1; } </script>

に相当

<script lang="es6"> import Vue from 'vue'; export default { data(){ return { ValA: 'hello world', ValB: 1 } } } </script>

概要：のためdataの変数の上の年、私たちが直接押すことができts、それに書かれたクラス変数文言を定義します

まあ、それはしますか？これを使用するプロパティを計算することである場合getter。

<script lang="ts"> import {Vue, Component} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ get ValA(){ return 1; } } </script>

に相当

<script lang="es6"> import Vue from 'vue'; export default { computed: { ValA: function() { return 1; } } } </script>

概要：のためVueのプロパティの計算、我々は唯一の属性名は、機能、および持つ関数として定義されている計算する必要がgetキーワード。

もともと各計算プロパティの内部には、プレフィックスとなっている機能。Vuecomputedget

@Emit

Vueモニターやトリガイベント、Vueそれは2つの機能を提供$emitし、$on続いて。vue-property-decoratorそれを使用する方法？
それはですvue-property-decorator提供し@Emitプロパティ。

<script lang="ts"> import {Vue, Component, Emit} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ mounted(){ this.$on('emit-todo', function(n) { console.log(n) }) this.emitTodo('world'); } @Emit() emitTodo(n: string){ console.log('hello'); } } </script>

上記のコードを実行すると、なぜ？のは、それは同等ですか見てみましょう、「こんにちは」「世界」を出力します

<script lang="es6"> import Vue from 'vue'; export default { mounted(){ this.$on('emit-todo', function(n) { console.log(n) }) this.emitTodo('world'); }, methods: { emitTodo(n){ console.log('hello'); this.$emit('emit-todo', n); } } } </script>

で見ることができます@Emit（実行した後、その関数名に相当トリガする関数デコレータ驼峰式会转为横杠式写法イベント）や関数に渡す$emit。
私たちは特定のイベントをトリガしたい場合は、のようなemitTodoトリガーの下でresetイベント：

<script lang="ts"> import {Vue, Component, Emit} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ @Emit('reset') emitTodo(n: string){ } } </script>

私達はちょうどデコレータを与える必要があり@Emit、イベント名パラメータを渡すreset機能は、そのようemitTodo実行した後にトリガされるresetイベントを。

概要：Vue我々が使用している$emit、の使用トリガイベントをvue-property-decorator、時間を助けることができる@Emit。デコレータを達成するために@Emit。修正機能が過去にイベントをトリガするときの動作の後に渡される引数を受け入れ
@Emit、イベントをトリガ、2件の書き込みがあります

@Emit()それはイベント名は、それが関数名を変更することであるトリガー、パラメータを渡しません。
@Emit(name: string)、どのトリガーされるイベントの名前である文字列を渡します。

@時計

我々は使用することができますvue-property-decorator提供を@Watchデコレータを置き換えるためVueにwatch値の変化を監視するために、プロパティ。

ではVue、次のように使用、リスナーは次のとおりです。

export default{
    watch: {
        'child': this.onChangeValue // 这种写法默认 `immediate`和`deep`为`false` , 'person': { handler: 'onChangeValue', immediate: true, deep: true } }, methods: { onChangeValue(newVal, oldVal){ // todo... } } }

だから、どのように我々は使うのですか@Watch、それはやる変換するデコレータを？

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

@Watch('child')
onChangeValue(newVal: string, oldVal: string){
    // todo... } @Watch('person', {immediate: true, deep: true}) onChangeValue(newVal: Person, oldVal: Person){ // todo... }

概要：@Watch非常に使いやすい、最初の引数を受け入れるには、オプションの対象をリッスンする2番目のプロパティの名前です。@Watchプロパティの変更後に作動するように聞いている装飾機能。

@Prop

私たちは、使用Vue時間を渡すために親コンポーネントを受け取るパラメータのサブアセンブリに遭遇し、時には。私たちは、定義する必要がPropプロパティを。

例えば、サブアセンブリは、親コンポーネントからの3つの属性を受け取りpropA、propB、propC。

propAタイプNumber
propBデフォルト値default value
propCタイプStringまたはBoolean

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

私たちは、使用vue-property-decoratorオファーは@Prop次のように上記のコードに変換することができます。

<script lang="ts"> import {Vue, Component, Prop} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ @Prop(Number) propA!: number; @Prop({default: 'default value'}) propB!: string; @propC([String, Boolean]) propC: string | boolean; } </script>

ここでは!、オプションのパラメータが?逆になっている、!言うTypeScript価値をそこに持っている必要があります私を。

要約：@Propパラメータは変数またはオブジェクトまたは配列型であってもよい受け入れる。@Propそのようなタイプの受け入れがNumberあるJavaScript属性タイプが定義された後、型TypeScriptタイプ。

ミックスイン

使用時にはVue、開発中の私たちはしばしば組み合わせ、混合するために使用しTypeScript、我々は2つの持っている後mixinsのメソッドを。

一つはされvue-class-componentて。

//定义要混合的类 mixins.ts
import Vue from 'vue';
import Component from 'vue-class-component'; @Component // 一定要用Component修饰 export default class myMixins extends Vue { value: string = "Hello" }

// 引入
import  Component  {mixins}  from 'vue-class-component';
import myMixins from 'mixins.ts'; @Component export class myComponent extends mixins(myMixins) { // 直接extends myMinxins 也可以正常运行 created(){ console.log(this.value) // => Hello } }

第二の方法はある@Componentに混合しました。

私たちは見て変換mixins.ts、定義vue/type/vueモジュール、Vueインタフェースを

// mixins.ts
import { Vue, Component } from 'vue-property-decorator';


declare module 'vue/types/vue' { interface Vue { value: string; } } @Component export default class myMixins extends Vue { value: string = 'Hello' }

混入

import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from '@static/js/mixins'; @Component({ mixins: [myMixins] }) export default class myComponent extends Vue{ created(){ console.log(this.value) // => Hello } }

概要：定義中の二つの異なる方法mixins定義されていない場合vue/type/vue、モジュールは、それらが混在して持っているだろうというとき、定義した場合に混合モジュールは、可能で直接混合しました。继承mixinsvue/type/vue@Componentmixins

@Model

Vueコンポーネントが提供model：{prop?: string, event?: string}私たちがカスタマイズできるようにpropしてevent。
デフォルトでは、コンポーネントがv-modelしますvalueとして使用するpropと、input使用しeventますが、ボタンなどの入力タイプのいくつかのチェックボックスを使用したい場合がありvalue prop、異なる目的のために。使用model生じる紛争のこのような状況を回避するためのオプションを。

以下はVue公式サイトの例

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change' }, props: { // this allows using the `value` prop for a different purpose value: String, // use `checked` as the prop which take the place of `value` checked: { type: Number, default: 0 } }, // ... })

<my-checkbox v-model="foo" value="some value"></my-checkbox>

上記のコードは、と等価です。

<my-checkbox
  :checked="foo"
  @change="val => { foo = val }" value="some value"> </my-checkbox>

そのfoo結合双方向での成分であるchecke場合、双方向の結合値をトリガすることですchange

使用がvue-property-decorator提供される@Model上記の変換の例を。

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

@Component
export class myCheck extends Vue{ @Model ('change', {type: Boolean}) checked!: boolean; }