vue2传统写法
<script>
export default {
name: 'xx',// 组件名
components: {},// 组件
props: {},// 父组件传递来的值
data() { // 声明变量的位置
return {};
},
watch:{},// 监听器
computed:{}, // 计算属性
mounted() {}, // 生命周期钩子函数
methods: {}// 方法
};
</script>
vue3新写法
<script lang="ts">
import {Vue, Component, Prop, Watch} from 'vue-property-decorator';// ts装饰器
import tabs from '@/components/Tabs.vue';
@Component({
components: {tabs},//组件引用
})
export default class Money extends Vue {// ts类组件声明
// vue-property-decorator 装饰器写法
@Prop({ default: 'default value' }) readonly propB!: string // Prop
// vue-property-decorator 装饰器写法
@Watch('child')// 监听器
onChildChanged(val: string, oldVal: string) {} // 监听器相应方法
get recordList() {} // 得到计算属性
set recordList(value: string) {} // 声明计算属性
mounted(): void {}// 钩子函数
xxxx(value: string) {}// 方法,声明传入值必须为字符串
}
</script>
<script>
import {XXX} from 'xxx';
export default {
setup() {
const state = reactive({
})
const xx = () =>{
}
return {
state,
xx,
}
}
}
</script>