组件前面必须加上@Component装饰器

<script lang="ts">
import { Vue,Component } from 'vue-property-decorator';
@Component
export default class App extends Vue {
    msg:string = "hello vue";
    mounted():void{
      console.log("mounted")
    }
}
</script>

vue-ts中创建一个组件

创建一个组件

快捷方式: vbase-ts-class
<template>
  <div>
      Hello Component
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Hello extends Vue {
}
</script>
<style scoped>
</style>

App.vue 导入组件

import Hello from './components/Hello.vue'

需要在@Component注册

@Component({
  components:{
    Hello
  }
})

使用

<Hello></Hello>

@Provide—data

等同于之前的data

import { Vue, Component, Provide } from "vue-property-decorator"
export default class App extends Vue {
  @Provide() list: string = "list";
  // msg:string = "hello vue";
}

父组件传值给子组件

子组件设置动态属性,接收父组件传递过来的参数

<Hello :data="child"></Hello>

在子组件的@Prop中注册

<script lang="ts">
import { Component, Vue,Prop } from "vue-property-decorator";
@Component
export default class Hello extends Vue {
    @Prop() data!:string;
    /* !这个数据是一定要传递的 */
}
</script>