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>