在vue-cli中使用vue-property-decorator裝飾器

安裝

npm i -s vue-property-decorator

如果你的項目是安裝了TS那麼就可以直接使用，如果沒有安裝TS但是還是想用vue-property-decorator裝飾器那麼就還需要去配置一下了

使用vue-property-decorator要用babel轉義,因爲我們的項目中是沒安裝TS的是直接使用

在babel.config.js文件中

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    // vue-property-decorator 配置
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    // end vue-property-decorator 配置
  ]
}

在jsconfig.json文件中

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

那麼就可以使用了那麼下面我們對分別裝飾器一一案例解答

@Component

@Component 裝飾器可以接收一個對象作爲參數，可以在對象中聲明 components ，filters，directives等未提供裝飾器的選項

雖然也可以在@Component裝飾器中聲明computed，watch等，但並不推薦這麼做，因爲在訪問this時，編譯器會給出錯誤提示

import TSTest from './zj'
import { Component, Vue } from 'vue-property-decorator'
@Component({
  components: {
    TSTest // 組件名稱
  }
})
class element_1 extends Vue {
  aa = true
  // 顯示按鈕
  handleShow () {
    console.log('我被點擊了')
    this.aa = true
  }
}
export default element_1

注意：@Component({})這個是是放在class外面的爲什麼呢？我認爲是因爲在Component對象中的值是一些定義，和渲染的作用的方法，可以不用去繼承Vue中的一些方法，例如:filters(過濾)，都是自己定義就好了，對吧，所以就寫出來了

@Prop

當父組件有傳:show的時候那麼子組件就可以這樣使用了

參數一：類型，默認值

注意是在TS中的寫法好像show後面還有加！什麼的但是不用TS的話就不需要，比如我就沒用只是單單用這個裝飾器

@Prop({ type: Boolean, default: true }) show

@PropSync

不知道大家對.sync修飾符的理解是這麼樣了，可以看我以前寫的-sync

這裏的show就是接收的值，當showTransmit值發生改變的時候，這個值就會傳遞給父組件中:show中的那個值

 @PropSync('show', { type: Boolean, default: true }) showTransmit

當然你要認爲@PropSync難理解只用@Prop也可以就是要外加

參數二 ：改變的值這裏爲false，傳給父組件

this.$emit('update:show', false);

@Watch

監聽，這個簡單好理解

參數一：監聽的值

參數二：對象

  @Watch('showTransmit', { immediate: true, deep: true }) //這裏不用this
  // immediate?:boolean  偵聽開始之後是否立即調用該回調函數
  // deep 被偵聽的對象的屬性被改變時，是否調用該回調函數,也就是深度查詢
  showTransmitWatch (newVal, oldVal) {
    console.log('改變後的值', newVal)
    console.log('改變前的值', oldVal)
  }

@Model

v-molder的裝飾器,這個比較複雜，可以先看我以前寫的vue的介紹 -- Model

HTML：這個是子組件中的input

<input type="text" :value="value1" @change="handleVal2($event)" />

JS

解析：

modelEvent是告訴父組件需要監聽的事件，value1是父組件傳過來的值

相當於

model:{
  prop: 'value1', // value1是子組件接收的值，傳遞給父組件的值是$emit('input','參數')中的參數的值，注意的是子組件不要直接拿父組件傳過來的值去修改
  event: 'modelEvent' // 定義父組件監聽的事件
}

@Model('modelEvent', { type: String, default: '我是默認值' }) value1

// 事件
  handleVal2 (e) {
    this.$emit('modelEvent', e.target.value)
  }

解析和注意事項：

解析：當input中的@change事件觸發的時候（input中的內容發生改變），handleVal2()事件執行，給父組件監聽事件modelEvent，和參數e.target.value，由於@Model中的設置那麼這個參數會傳給父組件中v-model中的值，同時父組件會跟新value1的值傳給子組件

注意：value1的值只是父組件傳給子組件的值，當父組件傳的值不改變他是不會變的；外面不要直接去改變value1的值，因爲有可能value1的值是對象的時候有引用類型的問題