Vue使用vue-property-decorator修饰器结合

2020-01-31  本文已影响0人  辉夜真是太可爱啦
<script lang="ts">
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {Vue,Component,Watch,Prop} from 'vue-property-decorator'
import myMixins from '@static/js/mixins';

@Component({
  name:'Home',    //组件名称
  components:{HelloWorld},    //引入的组件components
  mixins:[myMixins],   //mixins
})
export default class Home extends Vue{

  //data
  bb:string='ddddddd'

  //computed计算属性
  get ComputedValue(){
    return 1;
  }

  //watch监听
  @Watch('bb', {immediate: true, deep: true})
  onChangeValue(newVal:string,oldVal:string){
      // todo...
  }

  //Prop
  @Prop({default:0}) propA?: number;       //默认值为0,?为选择
  @Prop([Number,String]) propB!: number;    //类型必须为数字或者字符串,!为必填

  //methods
  testFunction(){
    console.log('test');
  }

  //生命周期
  mounted(){

  }
  created(){

  }
  updated(){
    
  }
  destroyed(){
    
  }
}
</script>
上一篇 下一篇

猜你喜欢

热点阅读