Vue封裝公用組件模板

/vue新手參考套用
//DemoComponent.vue
<template>
  <div>
    <div>組件</div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default{
  name:"demo-component",
  props:{
    prop1:Number,
    prop2:{
      type:String,
      default:"#333333"
    },
    prop3:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return {
      testData:"數據1"
    };
  },
  created(){
    console.log("vue的生命週期--created");
  },
  watch:{
    prop1(val){
      console.log("監聽屬性");
    }
  },
  methods:{
      ...mapActions([]),//請求接口列表
      getData(){
        console.log("獲取數據");
      },
      findData(){
        console.log("查詢數據");
      }
  },
  computed:{
      isClose(){
        return this.prop3;
      }
  }
  
}
</script>
//DemoTemplate.vue
<template>
  <div>
    <demo-component/>
  </div>
</template>
<script lang="ts">
//引入社區插件，使vue組件的寫法更簡單清晰
import { Vue, Watch } from "vue-property-decorator";
import Component from "vue-class-component";
import { Action } from "vuex-class";
import DemoComponent from "@/common/DemoComponent.vue"
@Component({
  name:"demoTemplate",
  components:{
    [DemoComponent.name]:DemoComponent
  }
})
export default class DemoTemplate extends Vue{
  data1:string="測試數據";
  @Action("getDemoData") getDemoData;
  created(){
    this.getDemoData().then(res=>{
      console.log(res);
    },err=>{
      console.log(err);
    })
  }
  get isShow(){
    return true;
  }
  jump(){
    console.log("跳轉");
  }
}
</script>