java 模板组件_Vue封装公用组件模板

//vue新手参考套用

//DemoComponent.vue

组件

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;

}

}

}

//DemoTemplate.vue

//引入社区插件，使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("跳转");

}

}