Vue-cli3.0 +Typescript
在typescript环境下,vue的属性、事件等写法有很大的不同,在这里做一个总结:import { Component,Vue, Prop, Emit , Watch } from 'vue-property-decorator';一、计算属性javascriptcomputed: {// 计算属性的 getterreversedMessage...
·
在typescript环境下,vue的属性、事件等写法有很大的不同,在这里做一个总结:
import { Component,Vue, Prop, Emit , Watch } from 'vue-property-decorator';
一、计算属性
javascript
computed: {
// 计算属性的 getter
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
typescript
// 这里面的‘chatacctSex’不用另外定义,可以直接用
get chatacctSex() {
if(this.accountDetail.idcardCode !=='') {
if(Number((this.accountDetail.idcardCode).split('')[16])%2 === 0) {
return '女'
} else if (Number((this.accountDetail.idcardCode).split('')[16])%2 === 1) {
return '男'
}
} else {
return '未知'
}
}
二、Watch
javascript
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true
},
e: [
function handle1 (val, oldVal) { /* ... */ },
function handle2 (val, oldVal) { /* ... */ }
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1
typescript
这里onchange可以写在需要监听的属性前面,也可以写在后面
@Watch('refreshTime')
private refreshTimeOnChange(newVal: number) {
console.info(newVal)
}
三、父子组件传值
1、emit (子组件向父组件传值)
javascript
/** 子组件 */
// 第一个参数是自定义的事件名称,第二个需要上传到父组件的参数
this.$emit('resetExpireTime',this.expireTime)
/** 父组件 */
<temp-on-off @resetExpireTime="onResetExpireTime"></temp-on-off>
onResetExpireTime:function(value) {
console.info(value)
}
typescript
/** 子组件 */
@Emit()
private manuallyRefresh(refreshTime: number,msgId: string) {
console.info('Emit manuallyRefresh')
}
/** 父组件 */
// 这里需要注意的是,父组件里面@后面的事件名称需要将驼峰命名改成‘-’连接
<message-report @manually-refresh='onManuallyRefresh'/>
private onManuallyRefresh(time: number,msgId: string) {
this.refreshmsgId = msgId
this.refreshTime = time
}
2、prop (父组件向子组件传值)
javascript
/** 父组件 */
<talk-trend :date="talkTrend.talkDate"/>
/** 子组件*/
props:['date']
created() {
console.info(this.date)
}
typescript
/** 父组件 */
// 给父组件添加属性
<message-report :source="messageSource" @manually-refresh='onManuallyRefresh'/>
private messageSource: string = 'chat'
/** 子组件 */
@Prop({ default: '' })
private source: string;
private created() {
console.info(this.source)
}
更多推荐
已为社区贡献5条内容
所有评论(0)