首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Class Component

Vue Class Component类组件用法

2022-12-21 14:58:47 作者：和世界不一样，那就不一样！

这篇文章主要介绍了Vue Class Component类组件用法，组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体，封装性和隔离性非常强

类组件

1. @component

使用@Component注解，将类转化为 vue 的组件，以下是一个示例

import vue from 'vue'
import Component from 'vue-class-component'
// HelloWorld class will be a Vue component
@Component
export default class HelloWorld extends Vue {}

2. Data属性

data属性初始化可以被声明为类的属性。

<template>
  <div>{{ message }}</div>
</template>
<script>
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
  // Declared as component data
  message = 'Hello World!'
}
</script>

需要注意的是，如果初始值是undefined，则类属性将不会是相应式的，这意味着不会检测到属性的更改：

import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
  // `message` will not be reactive value
  message = undefined
}

为了避免这种情况，可以使用 null 对值进行初始化，或者使用 data()构造钩子函数，如下：

import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
  // `message` will be reactive with `null` value
  message = null
  // See Hooks section for details about `data` hook inside class.
  data() {
    return {
      // `hello` will be reactive as it is declared via `data` hook.
      hello: undefined
    }
  }
}

3. Methods属性

组件方法可以直接声明为类的原型方法：

<template>
  <button v-on:click="hello">Click</button>
</template>
<script>
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
  // Declared as component method
  hello() {
    console.log('Hello World!')
  }
}
</script>

4. Computed Properties(计算属性)

计算属性可以声明为类属性getter/setter：

<template>
  <input v-model="name">
</template>
<script>
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
  firstName = 'John'
  lastName = 'Doe'
  // Declared as computed property getter
  get name() {
    return this.firstName + ' ' + this.lastName
  }
  // Declared as computed property setter
  set name(value) {
    const splitted = value.split(' ')
    this.firstName = splitted[0]
    this.lastName = splitted[1] || ''
  }
}
</script>

5. watch

watch是写在@component({})中的

// A.vue文件
@Component<A>({
  components: {
    SvgIconVue,
  },
  watch: {
  // 监听limit字段的变化
    limit: {
      handler(val) {
        this.actionLoading = new Array(val).fill(false)
      }
    }
  }
})

6. hooks

@Component
export default class HelloWorld extends Vue {
  // 所有Vue生命周期挂钩也可以直接声明为类原型方法，但是您不能在实例本身上调用它们。
  // 声明自定义方法时，应避免使用这些保留名称。
  mounted() {
    console.log('mounted')
  }
}

7. 子组件接收父组件传参

子组件A.vue文件

const AProps = Vue.extend({
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 6
    },
    
  }
})
export default class A extends AProps {
  loading:false
  hello(){
    console.log('aa')
  }
}

extend

Vue类组件支持继承

@Component
export default class Super extends Vue { // 父组件
  superValue = 'Hello'
}
@Component
export default class HelloWorld extends Super { // 继承
  created() {
    console.log(this.superValue) // -> Hello
  }
}

Mixins

Vue类组件提供了mixins辅助功能，以类样式方式使用mixins。通过使用mixins帮助程序，TypeScript可以推断混合类型并在组件类型上继承它们。

注意：所有mixin必须声明为类组件。

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

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 + '!')
  }
}

props

Vue类组件没有提供用于props定义的专用API。但是，可以通过Vue.extend来实现。

const GreetingProps = Vue.extend({
  props: {
    name: String
  }
})
@Component
export default class Greeting extends GreetingProps {
  get message(): string {
    // this.name will be typed
    return 'Hello, ' + this.name
  }
}

extends 被占用了，如果想继承类组件或者混入时，可以使用mixins来实现

import Vue from 'vue'
import Component, { mixins } from 'vue-class-component'
import Super from './super'
const GreetingProps = Vue.extend({
  props: {
    name: String
  }
})
@Component
export default class Greeting extends mixins(GreetingProps, Super) {
  get message(): string {
    return 'Hello, ' + this.name
  }
}

到此这篇关于Vue Class Component类组件用法的文章就介绍到这了,更多相关Vue Class Component内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！