/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>