同一個(gè)坑可以掉一次也可以止步一次派殷，但絕不可以掉進(jìn)去第二次。
前期準(zhǔn)備墓阀，安裝node.js和npm毡惜，vue/cli
npm install -g @vue/cli //安裝vue/cli
vue ui //啟動(dòng)vue/cli項(xiàng)目?jī)x表盤
創(chuàng)建項(xiàng)目時(shí)勾選TypeScript，創(chuàng)建好的項(xiàng)目自動(dòng)配置了TypeScript支持
包括聲明文件shims-tsx.d.ts岂津，shims-vue.d.ts
cli.jpg
mixins混入
我理解的mixins混入虱黄，類似于用一個(gè)自定義的組件（以下簡(jiǎn)稱子組件）封裝對(duì)象的公共屬性和方法悦即，父組件引入子組件后以‘繼承’的方式可以使用子組件的屬性和方法吮成。
// 子組件 MyMinins.ts
import Vue from 'vue';
import Component from 'vue-class-component';
@Component // 一定要用Component修飾
export default class MyMinins extends Vue {
name: string = "Hello"
sum(a: number, b: number) {
return a + b
}
}
//js一般寫法
let mixin = {
data () {
return {
}
},
created () {
this.getBuList()
},
methods: {
getBuList () {
let that = this
//邏輯
},
}
}
export default mixin;
須要使用混入的組件內(nèi)import 引入MyMinins.ts, 注: export default class About extends mixins(myMixins)中的 default不能少,不能寫成export class About extends mixins(myMixins)
混入的屬性或者方法可以直接使用this.來訪問
//about.vue
<template>
<div class="about">
<h1>This is an about page</h1>
{{msg}}
</div>
</template>
<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import myMixins from '../components/MyMinins' //引入混入組件MyMinins
@Component
export default class About extends mixins(myMixins) {
msg: string = ''
created () {
this.msg=this.name
let count=this.sum(1, 2)
console.log(count)
}
}
</script>
//js一般寫法
//import導(dǎo)入js,export default {}不變,只需使用mixins注冊(cè),類似于components注冊(cè)組件,可直接調(diào)用mixins里面的方法
import optionMixin from '../../mixins/index';
export default {
components: { subCrumbs },
mixins: [optionMixin],
data () {
return {
}
}
}
瀏覽器展示 Hello
控制臺(tái)輸出 3
@Prop
@Prop() private msg!: string;
@Prop(Number) propA!: number;
@Prop({default: 'default value'}) propB!: string;
@propC([String, Boolean]) propC: string | boolean;
@Component 引入組件
import HelloWorld from "@/components/HelloWorld.vue";
@Component({
components: {
HelloWorld
}
})
@Watch
@Watch("wnewName") // 屬性監(jiān)聽
wnewName(val: number) {
this.value = val;
}
計(jì)算屬性 computed
get phone() {
// 計(jì)算屬性 方法前添加get關(guān)鍵字
return "http://xxxx.xxxx.com/";
}
methods 方法組
// 不需要使用methods 包裹，直接在生命周期同級(jí)寫就行
add() {
this.num += 1;
}
@Emit 事件的監(jiān)聽與觸發(fā),
this.emitTodo("world"); // 觸發(fā)
@Emit()
emitTodo(n: string) {
console.log("hello" + " " + n);
}
