Vue Class Component使用三

一、extends扩展

// super.js
import Vue from 'vue'
import Component from 'vue-class-component'

// 超类必须继承于Vue
@Component
export default class Super extends Vue {
  superValue = 'Hello'
}

// HelloWorld继承于超类
@Component
export default class HelloWorld extends Super {
  created() {
    console.log(this.superValue) // -> Hello
  }
}

二、mixins混合

// mixins.js
import Vue from 'vue'
import Component from 'vue-class-component'
// 定义mixins
@Component
export class Hello extends Vue {
  hello = 'Hello'
}
// 定义mixins
@Component
export class World extends Vue {
  world = 'World'
}

三、使用mixins

import Component, { mixins } from 'vue-class-component'
import { Hello, World } from './mixins'

@Component
export class HelloWorld extends mixins(Hello, World) {
  created () {
    console.log(this.hello + ' ' + this.world + '!') // -> Hello World!
  }
}

四、注意事项

类属性不要使用箭头函数，类原型方法this指向vue实例
始终使用vue的生命周期挂钩而不是 constructor

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class Posts extends Vue {
  posts = []
  // DO NOT do this
  errProperty = ()=>{ 
    return this.posts 
  }
  // 类构造方法
  constructor() {
    fetch('/posts.json')
      .then(res => res.json())
      .then(posts => {
        this.posts = posts
      })
  }
  // DO this
  sucProperty(){
    return this.posts
  }
  created() {
    fetch('/posts.json')
      .then(res => res.json())
      .then(posts => {
        this.posts = posts
      })
  }
}

五、Custom Decorators自定义装饰器

您可以通过创建自己的装饰器来扩展vue-class-component功能。Vue类组件为createDecorator创建自定义装饰器提供了帮助。createDecorator期望将回调函数作为第一个参数，并且该回调将接收以下参数：
options：Vue组件选项对象。对该对象所做的更改将影响所提供的组件。
key：应用装饰器的属性或方法键。
parameterIndex：如果自定义修饰符用于参数，则修饰参数的索引。

创建Log装饰器的示例，该装饰器在调用装饰的方法时输出带有方法名称和传递的参数的日志消息：
// decorators.js
import { createDecorator } from 'vue-class-component'

// Declare Log decorator.
export const Log = createDecorator((options, key) => {
  // Keep the original method for later.
  const originalMethod = options.methods[key]

  // Wrap the method with the logging logic.
  options.methods[key] = function wrapperMethod(...args) {
    // Print a log.
    console.log(`Invoked: ${key}(`, ...args, ')')

    // Invoke the original method.
    originalMethod.apply(this, args)
  }
})

使用它作为方法装饰器：
import Vue from 'vue'
import Component from 'vue-class-component'
import { Log } from './decorators'

@Component
class MyComp extends Vue {
  // It prints a log when `hello` method is invoked.
  @Log
  hello(value) {
    // ...
  }
}
在上面的代码中，当hello使用调用method时42，将输出以下日志：
Invoked: hello( 42 )

点击跳转至官方网址

Vue Class Component使用三

lhh

lhh

Vue Class Component

Vue Class Component使用二

Vue Class Component使用一

Vue Class Component

Vue Class Component使用二