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>