vue - component （組件）

Vue.js

本章內容：

• 組件
  • 全局組件聲明方式
  • 局部組件聲明方式
  • 組件的注意事項

#### 組件

​ 以電腦機箱爲例，電腦機箱中的各個部件都可以看作爲組件，比如顯卡，CPU，硬盤，電源等。每個組件都是獨立的，有着自己的特性及功能，當出現問題後可以直觀的找到出現問題的組件，這方便於後期的維護。

全局組件聲明方式

​ 全局組件適用與所有Vue實例。

<div id="app">
    <!-- 如果組件名稱駝峯命名，這裏建議使用烤串法進行調用。 -->
    <component-one></component-one>
</div>

// 聲明全局組件
Vue.component("componentOne", {
    template: `
        <div>
            <h2>我是全局組件</h2>
        </div>	
    `
})
new Vue({
    el: "#app"
})

局部組件聲明方式

​ 局部組件僅適用於當前的Vue實例。

<div id="app">
	<component-two></component-two>
</div>

new Vue({
    el: "#app",
    components: { // 聲明局部組件
        componentTwo: {
            template: `
                <div>
                    <h2>我是局部組件</h2>
                </div>
            `
        }
    }
})

組件的注意事項

1. 組件名不能是HTMl內置的標籤名重名。

2. 如果組件的名稱是多個單詞組合而成的, 並且組件的名稱是駝峯命名法, 或者所有單詞的首字母全大寫, 這時在調用組件名稱的時候, 用烤串式名字調用, 例如:

   new Vue({
   	el:"#app",
   	components:{
   		HeaderNav:{
               template:"<div></div>"
   		}
   	},
       template:`
           <div id='app'>
               <header-nav></header-nav>
           </div>
   	`
   })
   

3. 組件 (VueComponent)與Vue之間是父子關係 (繼承關係), 用ES6代碼體現如下:

   // 組件與Vue實例的關係
   class VueComponent extends Vue {
   	// 表明Vue實例(對象) 擁有的選項, VueComponent實例 (對象) 都擁有
   }
   

4. 在組件中與new Vue中寫法有區別的在於, 組件中el是不需要的, 但是在組件中data必須是一個函數, 並且return所用的數據, 如果不是個函數, 調用data的數據回進行報錯。

   const myComponent = {
        // 組件中data必須是個函數，返回一個數據對象。
       data() {
           return {
               a: 100,
               b: 99
           }
       },
       template: "<div>我是側邊欄組件{{ a + b }}</div>"
   }
   

---