vue create my-ts
,my-ts就是所创建的项目的名称vue create my-ts
Manually select features
回车确认typescript
vuex
router
babel
css pre-processors Linter/Formatter
空格键选中和取消,回车确认ESLint+Prettier
import { Vue, Component, Prop, Provide, Inject, Model, Watch, Emit, Mixins } from 'vue-property-decorator'
(1)
Vue
实际上就是 Vue 本身,用来继承vue相关属性和函数 (2)
@Component
声明成一个vue的组件实例,不使用的话,就不能得到一个vue组件
import { Component, Vue } from "vue-property-decorator";
// 不需要定义额外内容
@Component
export default class MyComponent extends Vue {}
import { Component, Vue } from "vue-property-decorator";
import bank102 from "@/assets/image/bank-list/102_GongShang.png";
import bank103 from "@/assets/image/bank-list/103_NongYe.png";
import bank104 from "@/assets/image/bank-list/104_ZhongGuo.png";
// 需要定义一些相关内容
@Component({
/* 这里和js版本编写的 vue 组件内容相同,
* 凡是不能在ts里面完成的都可以在这里完成
* 最终会被合并到一个实例中。
*/
components: {
componentsA,
componentsB
},
})
export default class MyComponent extends Vue {
// data
name: string = "jim";
age: number = 12;
bankList: object[] = [];
showFlag: boolean = false;
imgSrc: object = {
bank102,
bank103,
bank104
};
certTypeList: { key: string; value: string }[] = [
{ key: "0", value: "身份证" },
{ key: "1", value: "户口簿" },
{ key: "2", value: "护照" }
];
// methods
getBankList(){
}
mounted(){
// TODO
}
}
(3)@Prop
由标签属性注入,获取对应标签属性值,可配置具体prop内容import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Prop(Number) readonly propA: number | undefined
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC: string | boolean | undefined
}
相当于
export default {
props: {
propA: {
type: Number
},
propB: {
default: 'default value'
},
propC: {
type: [String, Boolean]
}
}
}
(4)@Provide
向任意层级的子组件提供可访问的属性(5)@Inject
获取父级由Provide提供的属性import { Component, Inject, Provide, Vue } from 'vue-property-decorator'
const symbol = Symbol('baz')
@Component
export class MyComponent extends Vue {
@Inject() readonly foo!: string
@Inject('bar') readonly bar!: string
@Inject({ from: 'optional', default: 'default' }) readonly optional!: string
@Inject(symbol) readonly baz!: string
@Provide() foo = 'foo'
@Provide('bar') baz = 'bar'
}
相当于
const symbol = Symbol('baz')
export const MyComponent = Vue.extend({
inject: {
foo: 'foo',
bar: 'bar',
optional: { from: 'optional', default: 'default' },
[symbol]: symbol
},
data() {
return {
foo: 'foo',
baz: 'bar'
}
},
provide() {
return {
foo: this.foo,
bar: this.baz
}
}
})
(6)@Watch
观察某个属性更新import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Watch('child')
onChildChanged(val: string, oldVal: string) {}
@Watch('person', { immediate: true, deep: true })
onPersonChanged1(val: Person, oldVal: Person) {}
@Watch('person')
onPersonChanged2(val: Person, oldVal: Person) {}
}
相当于
export default {
watch: {
child: [
{
handler: 'onChildChanged',
immediate: false,
deep: false
}
],
person: [
{
handler: 'onPersonChanged1',
immediate: true,
deep: true
},
{
handler: 'onPersonChanged2',
immediate: false,
deep: false
}
]
},
methods: {
onChildChanged(val, oldVal) {},
onPersonChanged1(val, oldVal) {},
onPersonChanged2(val, oldVal) {}
}
}
(7)@Model
是v-model的装饰器,当自定义组件想使用v-model时,可以使用这种方式,配合emit可以双向传递属性值import { Vue, Component, Model } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Model('change', { type: Boolean }) readonly checked!: boolean
}
相当于
export default {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: {
type: Boolean
}
}
}
(8)@Emit
this.$emit 的装饰器,如果没有指定名称,默认使用函数名称。有返回值时,使用返回值,没有不使用import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
count = 0
@Emit()
addToCount(n: number) {
this.count += n
}
@Emit('reset')
resetCount() {
this.count = 0
}
@Emit()
returnValue() {
return 10
}
@Emit()
onInputChange(e) {
return e.target.value
}
@Emit()
promise() {
return new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
}
}
相当于
export default {
data() {
return {
count: 0
}
},
methods: {
addToCount(n) {
this.count += n
this.$emit('add-to-count', n)
},
resetCount() {
this.count = 0
this.$emit('reset')
},
returnValue() {
this.$emit('return-value', 10)
},
onInputChange(e) {
this.$emit('on-input-change', e.target.value, e)
},
promise() {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
promise.then(value => {
this.$emit('promise', value)
})
}
}
}
Mixins
// AMixin.ts
@Component
export default class AMixin extends Vue {
protected myname = "A";
created(){}
getMyName(){ console.log(this.myname) }
}
// BMixin.ts
@Component
export default class BMixin extends Vue {
protected myname = "B";
created(){}
getMyName(){ console.log(this.myname) }
}
页面中使用
@Component
class MyComponent extends Mixins(AMixin,BMixin) {
mounted(){
this.getMyName() // B
}
}
对于计算属性computed ,可以用get代替
import { Vue, Component } from "vue-property-decorator";
@Component
class MyComponent extends Vue {
private myname = "jim";
get msg(){
return "您好!" + this.myname
}
}
相当于
export default{
data() {
return{
myname: "jim"
}
},
computed:{
msg(){
return "您好!" + this.myname;
}
}
}