Vue Class Component類組件用法
更新時(shí)間：2022年12月21日 14:58:46 作者：和世界不一樣，那就不一樣！
這篇文章主要介紹了Vue Class Component類組件用法，組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一，它是html、css、js等的一個(gè)聚合體，封裝性和隔離性非常強(qiáng)
類組件
1. @component
使用@Component注解，將類轉(zhuǎn)化為 vue 的組件，以下是一個(gè)示例
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，則類屬性將不會(huì)是相應(yīng)式的，這意味著不會(huì)檢測(cè)到屬性的更改：
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 對(duì)值進(jìn)行初始化，或者使用 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(計(jì)算屬性)
計(jì)算屬性可以聲明為類屬性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生命周期掛鉤也可以直接聲明為類原型方法，但是您不能在實(shí)例本身上調(diào)用它們。
// 聲明自定義方法時(shí)，應(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來實(shí)現(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 被占用了，如果想繼承類組件或者混入時(shí)，可以使用mixins來實(shí)現(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于vue2強(qiáng)制刷新,解決頁(yè)面不會(huì)重新渲染的問題
今天小編就為大家分享一篇關(guān)于vue2強(qiáng)制刷新,解決頁(yè)面不會(huì)重新渲染的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue無限輪播插件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
詳解Vue項(xiàng)目編譯后部署在非網(wǎng)站根目錄的解決方案
這篇文章主要介紹了Vue項(xiàng)目編譯后部署在非網(wǎng)站根目錄的解決方案,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
使用vue-router切換組件時(shí)使組件不銷毀問題
這篇文章主要介紹了使用vue-router切換組件時(shí)使組件不銷毀問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
最近接觸了一個(gè)項(xiàng)目，vue怎么在不同屏幕上做根據(jù)不同屏幕大小適配，本文就詳細(xì)的來介紹一下，感興趣的可以了解一下2021-09-09
一文詳解Vue選項(xiàng)式?API?的生命周期選項(xiàng)和組合式API
這篇文章主要為大家介紹了Vue選項(xiàng)式?API?的生命周期選項(xiàng)和組合式API變化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue2.0+koa2+mongodb實(shí)現(xiàn)注冊(cè)登錄
這篇文章主要介紹了vue2.0+koa2+mongodb實(shí)現(xiàn)注冊(cè)登錄功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了修改Vue項(xiàng)目運(yùn)行的IP和端口的方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02
Vue3封裝自動(dòng)滾動(dòng)列表指令(含網(wǎng)頁(yè)縮放滾動(dòng)問題）
本文主要介紹了Vue3封裝自動(dòng)滾動(dòng)列表指令(含網(wǎng)頁(yè)縮放滾動(dòng)問題），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue中子組件修改父組件傳過來的值的三種方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-12-12