vue : 对 vue-class-component 的个人理解
vue-class-component 是 vue 的官方库,作用是用类的方式编写组件。
这种编写方式可以让.vue文件的js域结构更扁平,并使vue组件可以使用继承、混入等高级特性。
简单的示例:
ComponentA.vue
<template> <div> <p>{{ nameString }}</p> <p>{{ child }}</p> <button @click="comClick">button</button> </div> </template> <script> import Vue from 'vue' import Component from 'vue-class-component' @Component({ props: { child: String }, watch:{ }, components: { } }) export default class ComponentA extends Vue { // initial data nameString = `ComponentA` // lifecycle hook mounted () { this.greet() } // computed get computedMsg () { return 'computed ' + this.nameString } // method greet () { console.log('greeting: ' + this.nameString) } } </script> <style> </style>
App.vue
<template> <div id="app"> <component-a ref="a" :child="nameString" @com-click="fromChildEvent" /> </div> </template> <script> import Vue from 'vue' import Component from 'vue-class-component' import ComponentA from './ComponentA' @Component({ components: { 'component-a': ComponentA } }) export default class App extends Vue {} </script> <style lang="less"> </style>
开始我并不理解这种全新的写法,心想:props watch components 写哪儿呢?
后来知道了,写在 @Component() 修饰器方法里。
关于js的修饰器可以参考这一篇文章。
=== 分割线 ===
那么,能不能让这几个被拿出来的东西也写到里面呢?
可以的。
vue-property-decorator 是一个非官方库,是 vue-class-component 的很好的补充。它可以让vue的某些属性和方法,通过修饰器的写法让它也写到vue组件实例的类里面。
比如 @Prop
@Watch
@Emit。
我们把 ComponentA.vue 文件 App.vue文件 稍微改一下。
ComponentA.vue
<template> <div> <p>{{ nameString }}</p> <p>{{ child }}</p> <button @click="comClick">button</button> </div> </template> <script> import { Vue, Component, Emit } from 'vue-property-decorator' @Component({ props: { child: String }, watch:{ }, components: { } }) export default class ComponentA extends Vue { // initial data nameString = `ComponentA` @Emit() comClick() { return { nameString:this.nameString } } } </script> <style> </style>
App.vue
<template> <div id="app"> <component-a ref="a" :child="nameString" @com-click="fromChildEvent" /> </div> </template> <script> import Vue from 'vue' import Component from 'vue-class-component' import ComponentA from './ComponentA' @Component({ components: { 'component-a': ComponentA } }) export default class App extends Vue { // initial data nameString = `App` fromChildEvent (obj) { console.log(obj) alert("METHODS fromChildEvent") } } </script> <style lang="less"> </style>
我们用vue-property-decorator写了 @Emit() 。另外可能你也发现了,Vue、Component 也可以通过 vue-property-decorator 引入。
=== 分割线 ===
最后,有一个js公共修饰器库,core-decorators。
这个库提供了非常多的修饰器,用惯了大概可以提高开发效率。
不过需要注意:core-decorators 和 typescript 不兼容。
以上。
posted on 2019-05-30 18:08 fox_charon 阅读(16336) 评论(0) 编辑 收藏 举报