vue+ts項目vue-property-decorator（裝飾器）用法

在vue項目使用ts時，裝飾器有如下幾種，下面爲這些裝飾器的具體用法而且有和js中寫法的對比：

1. @Component
2. @Emit
3. @Prop
4. @Watch
5. @Model
6. @Inject / @Provide
7. Mixins

下面爲具體代碼：

1.@Component

ts中引入組件components寫在@Component中，以下：

<template>
    <div class="parent">
        parent組件--{{title}}
        <hr>
        <Home v-model="title"></Home>
        <About v-model="title"></About>
    </div>
</template>

<script lang='ts'>
    import Home from './Home.vue'
    import About from './About.vue'
    import { Component, Vue } from 'vue-property-decorator';
    @Component({
        components: {
            Home,
            About
        }
    })
    export default class  extends Vue {
        private title: string = '父組件中的值'
    }
</script>
複製代碼

下面爲在js中引入組件components的寫法，與上面ts的代碼效果同樣：

<script>
import Home from './Home.vue'
import About from './About.vue'
export default {
    data() {
        return {
            title: '父組件中的值'
        }
    },
    components: {
        Home,
        About
    }
}
</script>
複製代碼

2.@Emit

ts中@Emit的用法以下：

<template>
  <div class="home">
    vue+ts項目vue-property-decorator用法
    <hr>
    <button @click="triggerEmit('qqq')">觸發emit</button>
  </div>
</template>

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

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

  private mounted() {
    this.$on('demo-log', (data: any): void => {
      alert(data)
    })
  }

  @Emit('demo-log')
  triggerEmit(n: any) {
    console.log('hhh')
  }
}
</script>
複製代碼

下面爲@Emit的另外一種寫法，$on位置使用 - 連接，@Emit位置直接使用駝峯命名，則能夠省略括號中的名稱：」

export default class Home extends Vue {
  private mounted() {
    this.$on('trigger-emit', (data: any): void => {
      alert(data)
    })
  }
  @Emit()
  triggerEmit(n: any) {
    console.log('hhh')
  }
}
複製代碼

下面爲$Emit在js中的寫法，與上面ts的代碼效果同樣：

export default {
  data() {
    return {}
  },
  mounted() {
    this.$on('trigger-emit', data => {
      alert(data)
    })
  },
  methods: {
    triggerEmit(val) {
      this.$emit('trigger-emit', val)
    }
  }
}
複製代碼

3.@Prop

ts中@Prop的用法以下：

<template>
  <div class="home">
    vue+ts項目vue-property-decorator用法
    <hr>
    <p>這是從父組件中傳過來的值: {{title}}</p>
  </div>
</template>

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

@Component({})
export default class Home extends Vue {
  @Prop() title!: string;
  // prop的類型和默認值 
  // @Prop({type: String, default: 'default value'}) title!: string;
}
</script>
複製代碼

下面爲prop在js中的寫法，與上面ts的代碼效果同樣：

export default {
  data() {
    return {}
  },
  props: ['title'],
  // props: {
  //   title: {
  //     style: String,
  //     default: 'default value'
  //   }
  // }
}
複製代碼

4.@Watch

ts中@Watch的用法以下

<template>
  <div class="home">
    vue+ts項目vue-property-decorator用法
    <hr>
    <input type="text" v-model="inputValue">
  </div>
</template>

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

@Component({})
export default class Home extends Vue {
  private inputValue: string = ''
  @Watch('inputValue')
  valueChange(newValue: string, oldValue: string) {
    console.log(newValue, oldValue)
  }
  // 對watch的配置爲第二個參數，以對象形式傳入
  // @Watch('inputValue',{ deep: true })
  // valueChange(newValue: string, oldValue: string) {
  //   console.log(newValue, oldValue)
  // }
   
}
</script>
複製代碼

下面爲watch在js中的寫法，與上面ts的代碼效果同樣：

export default {
  data() {
    return {
      inputValue: ''
    }
  },
  watch: {
    inputValue(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
複製代碼

5.@Model

ts中@Model的用法以下

父組件代碼以下

<template>
    <div class="parent">
        parent組件--{{title}}
        <hr>
        <Home v-model="title"></Home>
        <!-- 直接使用v-mode爲如下使用標籤的語法糖，默認子組件使用value接受prop傳值使用emit調用input方法修改值，在使用model參數prop修改如何接受，event修改emit調用哪一個方法來修改值 -->
        <!--<Home :value="title" @input="title=$event.target.value"></Home>-->
    </div>
</template>

<script lang='ts'>
    import Home from './Home.vue'
    import { Component, Vue } from 'vue-property-decorator';
    @Component({
        components: {
            Home
        }
    })
    export default class  extends Vue {
        private title: string = '父組件中的值'
    }
</script>
複製代碼

子組件ts代碼以下

<template>
  <div class="home">
    vue+ts項目vue-property-decorator用法
    <hr>
    <input type="text" v-model="inputValue" @input="valueChange($event.target.value)">
  </div>
</template>

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

@Component({})
export default class Home extends Vue {
  private inputValue: string = ''
  private created() {
    this.inputValue = this.valueFromModel
  }
  @Model ('changeValueFromModel')  valueFromModel !: string;
  @Emit('changeValueFromModel')
  // 參數應該爲輸入框的值，因此上面傳過來的值應該爲value而不能是e
  valueChange(val: string) {}
   
}
</script>
複製代碼

下面爲model在js中的寫法，與上面ts的代碼效果同樣：

export default {
  model:{
    prop: 'valueFromModel',
    event: 'changeValueFromModel'
  },
  props: ['valueFromModel'],
  data() {
    return {
      inputValue: ''
    }
  },
  created() {
    this.inputValue = this.valueFromModel
  },
  methods: {
    valueChange(e) {
      this.$emit('changeValueFromModel', e.target.value)
    }
  }
  
}
複製代碼

6.@Provide / @Inject

ts中@Provide / @Inject用法以下

父組件

<template>
    <div class="parent">
        parent組件--{{title}}
        <Home></Home>
    </div>
</template>

<script lang='ts'>
    import Home from './Home.vue'
    import { Component, Vue, Provide } from 'vue-property-decorator';
    @Component({
        components: {
            Home
        }
    })
    export default class  extends Vue {
        private title: string = '父組件中的值'
        @Provide()
        pOne = 'oneFromProvide'
        
        @Provide('pTwo')
        two = 'twoFromProvide'
    }
</script>
複製代碼

子組件

<template>
  <div class="home">
    vue+ts項目vue-property-decorator用法
    <hr>
    來自provide中的值--1--{{pOne}}--2--{{pTwo}}
  </div>
</template>

<script lang="ts">
import { Component, Vue, Inject } from 'vue-property-decorator';
import outMixins from './mixins';

@Component({})
export default class Home extends Vue {
  @Inject('pOne')
    pOne!: string;
    
  @Inject({
      from:'pTwo',
      default:'default value'
  })
  pTwo!: string;
}
</script>
複製代碼

下面爲project / inject在js中的寫法，與上面ts的代碼效果同樣：

父組件

<template>
    <div class="parent">
        parent組件
        <About></About>
    </div>
</template>

<script>
import About from './About.vue'
export default {
    components: {
        About
    },
    provide () {
        return {
            pOne: 'oneFromProvide',
            pTwo: 'twoFromProvide'
        }
    }
}
</script>
複製代碼

子組件

<template>
  <div class="home">
    vue+js項目
    <hr>
    來自provide中的值--1--{{pOne}}--2--{{pTwo}}
  </div>
</template>

<script>
export default {
  inject: {
    pOne: 'pOne',
    pTwo: { from: 'pTwo', default: 'default value' }
  }
}
</script>
複製代碼

7.Mixins

ts中Mixins的用法以下

mixins.ts文件以下

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

@Component
export default class myMixins extends Vue {
    valueFromMixins: string = "來自mixins的value"
}
複製代碼

ts代碼以下

<template>
  <div class="home">
    vue+ts項目vue-property-decorator用法
    <hr>
    來自mixins中的變量--{{valueFromMixins}}
  </div>
</template>

<script lang="ts">
import { Component, Vue, Model, Emit, Prop } from 'vue-property-decorator';
import outMixins from './mixins';

@Component({
  mixins: [outMixins]
})
export default class Home extends Vue {}
</script>

複製代碼

下面爲mixins在js中的寫法，與上面ts的代碼效果同樣：

<script>
import {outMixins} from './mixins'
export default {
  mixins:[outMixins]
}
</script>
複製代碼