vue中使用TypeScript實現父子組件之間的通信

2.vue-property-decorator和vue-class-decorator的區別

vue-property-decorator是社區出的，vue-class-decorator是官網出的，我們可以理解爲vue-property-decorator是vue-class-decorator的超集，裏面封裝了很多的裝飾器，我們一般在項目中使用vue-property-decorator即可

子傳父

父組件

<template>
  <div class="hello">
    {{str}}
    <Home @hello="onClick"/>
  </div>
</template>

<script lang="ts">
  import {Vue,Component} from 'vue-property-decorator'
//引入子組件，在中Component創建
    import Home from './home.vue';
  @Component({
      components: { 
            Home
      }
    })
//在script方面還是比起js有一定的差距的，這裏需要大家好好琢磨一下
  export default class App extends Vue {
    // 初始化數據 data可以聲明成類屬性形式
    str:String=""
    // 接收子組件傳遞過來的值
    onClick(res:String){
        this.str=res;
    }
  }
</script>

子組件

<template>
    <div @click="hello">
        點擊我給父組件傳遞值
    </div>
</template>

<script lang="ts">
    import {Vue,Component,Emit} from 'vue-property-decorator'
    @Component({})
    export default class Home extends Vue{
        msg= '子傳父'
//      裝飾器中的參數是方法名
        @Emit("hello")
        emitTodo():number{
            return 12
        }
//      和原本的vue一樣,子傳父使用方法來傳遞,引用一個@emit
        hello(){
            this.emitTodo()
        }
    }
</script>

父傳子

父組件

<template>
  <div class="hello">
    <Home :chuan="chuan"/>
  </div>
</template>

<script lang="ts">
  import {Vue,Component} from 'vue-property-decorator'
//引入子組件，在中Component創建
    import Home from './home.vue';
  @Component({
      components: { 
            Home
      }
    })
  export default class App extends Vue {
    // 初始化數據 data可以聲明成類屬性形式
    chuan:String="父傳子的值"
  }
</script>

子組件

<template>
    <div>
        {{chuan}}
    </div>
</template>

<script lang="ts">
    import {Vue,Component,Prop} from 'vue-property-decorator'
    @Component({})
    export default class Home extends Vue{
        @Prop(String) chuan!: String;
    }
</script>

基本的方法還是和以前的組件傳值是一樣的，只不過是使用了ts的語法和使用到了vue-property-decorator依賴項