快捷導航

Vue Class Component類組件用法

更新時間：2022年12月21日 14:58:46 作者：和世界不一樣，那就不一樣！

這篇文章主要介紹了Vue Class Component類組件用法，組件 (Component) 是 Vue.js 最強大的功能之一，它是html、css、js等的一個聚合體，封裝性和隔離性非常強

類組件

1. @component

使用@Component注解，將類轉(zhuǎn)化為 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，則類屬性將不會是相應(yīng)式的，這意味著不會檢測到屬性的更改：

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()構(gòu)造鉤子函數(shù)，如下：

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: {
  // 監(jiān)聽limit字段的變化
    limit: {
      handler(val) {
        this.actionLoading = new Array(val).fill(false)
      }
    }
  }
})

6. hooks

@Component
export default class HelloWorld extends Vue {
  // 所有Vue生命周期掛鉤也可以直接聲明為類原型方法，但是您不能在實例本身上調(diào)用它們。
  // 聲明自定義方法時，應(yīng)避免使用這些保留名稱。
  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來實現(xiàn)。

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來實現(xiàn)

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
  }
}

到此這篇關(guān)于Vue Class Component類組件用法的文章就介紹到這了,更多相關(guān)Vue Class Component內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: