Vue-通过TS来定义组件

需要用到vue-class-component和vue-property-decorator
父组件

<template>
  <div class="home">
    <p>首页</p>
    <p>{{message}}</p>
    <button @click="myFn('父组件')">父组件</button>
    <p>{{msg}}</p>
    <p>{{msg}}</p>
    <p>{{msg}}</p>
    <p>{{msg}}</p>
    <Son :parentdata="message" @parentfn="myFn"></Son>
  </div>
</template>

<script >
// import Vue from 'vue'
// import Component from 'vue-class-component'
import {Vue,Component,Watch} from "vue-property-decorator";
import Son from '../components/Son'

@Component({
  //如果类中找不到需要的添加的内容，那么可以写在这个地方
  name:'Home',
  components:{
    Son
  }
})
export default class Home extends Vue {
  //数据绑定 通过类的方式，那么的类中的属性就是以前data定义的属性
  message = 'www.LiHui666.com';
  str = '123456789'
  //定义方法 通过类的方式，那么的类中的方法就是以前methods中的方法
  myFn(data){
    alert(data);
  }
  //计算属性  通过类的方式，那么的类中的getter方法就是以前computer中的方法
  get msg(){
    console.log("执行了");
    return this.str.split("").reverse().join("");
  }

  //第一个参数：需要观察的属性名称
  //第二个属性：可选配置，如果deep:true,表示深度监听
  @Watch('message',{deep:true})
  messageChange(newValue,oldValue){
    console.log(newValue, oldValue);
  }
}
</script>

子组件

<template>
  <div class="son">
    <p>首页子组件</p>
    <p>{{parentdata}}</p>
    <button @click="sonFn">子组件方法</button>
  </div>
</template>

<script >
import {Vue,Component,Prop,Emit} from "vue-property-decorator";
@Component
export default class Home extends Vue {
  //接受父组件传递的值
  @Prop(String) parentdata;
  //接受父组件传递的方法 方式一通过声明
  @Emit('parentfn')
  sonFn(){
    //方式二 emit传统接受
    // this.$emit('parentfn'，'子组件');
    return "子组件";
  }
}
</script>