在Vue.js中有兩種常見的組件類寫法：類組件寫法和對象組件寫法。類組件寫法使用ES6中的class關鍵字來定義組件，而對象組件寫法則使用簡單的JavaScript對象來定義組件。這篇文章將介紹Vue.js的類組件寫法。

首先需要在代碼中導入Vue.js:

import Vue from 'vue';

然后可以使用class關鍵字定義Vue.js組件。

export default class MyComponent extends Vue {
//組件的代碼邏輯
}

在這段代碼中，我們定義了一個名為MyComponent的組件，并且指定它繼承了Vue類。繼承Vue類是必需的，因為它提供了Vue.js組件所需的基本功能。

接下來，我們可以在MyComponent類中添加組件的屬性和方法。比如：

export default class MyComponent extends Vue {
data() {
return {
message: 'Hello World!'
};
}
mounted() {
console.log(this.message);
}
}

這個組件有一個data函數，返回一個包含message屬性的對象，message的值為'Hello World!'。此外，組件還有一個mounted方法，在組件渲染到頁面時自動調用，并在控制臺中打印message的值。

在Vue.js的類組件中，組件還可以包含計算屬性：

export default class MyComponent extends Vue {
data() {
return {
width: 100,
height: 100
};
}
get area() {
return this.width * this.height;
}
}

這個組件有一個data函數，返回一個包含width和height屬性的對象。組件還有一個計算屬性area，返回width和height的乘積。

除了計算屬性外，組件還可以包含計算方法：

export default class MyComponent extends Vue {
data() {
return {
width: 100,
height: 100
};
}
getArea() {
return this.width * this.height;
}
}

這個組件有一個data函數，返回一個包含width和height屬性的對象。組件還有一個計算方法getArea，返回width和height的乘積。

Vue.js的類組件還支持通過props來向組件傳遞數據：

export default class Child extends Vue {
props: {
message: String
};
mounted() {
console.log(this.message);
}
}

這個組件定義了一個message的prop，類型為String。在組件中，我們可以通過this.message來獲取傳遞給組件的值。

最后，在MyComponent類中還可以定義組件的模板：

export default class MyComponent extends Vue {
data() {
return {
message: 'Hello World!'
};
}
template: `
{{ message }}
`
}

這個組件的模板包括一個div元素和一個p元素，p元素的內容為message的值。

總之，在Vue.js的類組件寫法中，我們可以使用class關鍵字來定義組件，繼承Vue類。然后我們可以在MyComponent類中添加需要的屬性、方法、計算屬性和計算方法，并支持通過props向組件傳遞數據。最后，我們還可以在MyComponent類中定義組件的模板。