可以官网了解 vue-property-decorator
import { Component, Vue, Prop, Emit , Watch } from 'vue-property-decorator'
## 使用方式
@Prop 父子组件之间传值
@Prop({
type: String,
default: 'Default Value'
}) msg: string;
@Model 数据双向绑定
@Model('change') checked: boolean
@Watch 监听数据变化
//监听路由变化
@Watch('$route')
onRouteChanged(route: any, oldRoute: any):void {
this.$forceUpdate() ## 刷新当前的数据
}
@Provide 提供 / @Inject 注入
## 父
@Provide('users')
users = [
{
name: 'test',
id: 0
}
]
## 子
@Inject('users') users;
// 修饰器
const Log = (msg) => {
return createDecorator((component, key) => {
console.log("#Component", component);
console.log("#Key", key); //log
console.log("#Msg", msg); //App
})
}
@Log('fullMessage get called')
// computed
get fullMessage() {
return `${this.message} from Typescript`
}
// 父子传值
@Emit()
private methodName(x: number, y: string) {
console.info('child to parent a value')
}
npm run new:comp
npm run new:view
npm install
npm run serve
npm run build
npm run test
npm run lint