VUE是一款非常優(yōu)秀的JS框架，而Component Script為VUE開發(fā)者提供了非常強(qiáng)大的組件化開發(fā)能力。那么到底什么是Component Script，又該如何使用呢？

定義一個(gè)組件的Component Script如下所示：                                                                  
const MyComponent = {                                                        
data() {                                                                   
return {                                                                 
name: 'Vue 3',                                                         
author: 'Evan You'                                                      
}                                                                         
},                                                                          
template: `
{{ name }}
Written by {{ author }}
`                                                                           
}                                                                             
export default MyComponent;

在上面的代碼中，我們通過定義一個(gè)名為MyComponent的對(duì)象來定義了一個(gè)組件。我們可以在該腳本中進(jìn)行數(shù)據(jù)定義，模板定義，以及一些其他的邏輯，最終通過export default導(dǎo)出一個(gè)組件。這個(gè)組件可以被其他的.vue文件中通過<script>標(biāo)簽的import導(dǎo)入并且使用。

使用Component Script
<template>
<MyComponent/>                                                            
</template>
<script>
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
}
}
</script>

上面的代碼中，我們?cè)诟附M件的.vue文件中使用了MyComponent，并在<script>標(biāo)簽中通過import導(dǎo)入了MyComponent組件，然后通過components屬性在Vue實(shí)例中注冊(cè)了該組件。這樣，我們就可以在父組件的template中使用MyComponent組件了。在VUE中使用組件就是這么簡(jiǎn)單。