Vue入門教程 第五篇 （組件）

component（組件）

vue是單頁面web程序，這意味着需要大量模塊化界面參與其中，這就是組件。

組件是一個實現單一功能的vue界面，也可以是一個以功能划分而成的復雜vue界面。

 

注冊組件：

 Vue.component('my-component-name', { /* ... */ }) 

范例：

<div id="app">
    <runoob></runoob>
</div>
<script>
// 注冊
Vue.component('runoob', {
  template: '<h1>自定義組件!</h1>'
})
new Vue({
  el: '#app'
})
</script>

以上這些組件是全局注冊的。也就是說它在注冊之后可以用在任何新創建的 Vue 根實例 (new Vue) 的模板中。全局注冊所有的組件意味着即便你已經不再使用一個組件了，它仍然會被包含在你最終的構建結果中。這造成了用戶下載的 JavaScript 的無謂的增加。

 

局部注冊組件：

<div id="app">
    <runoob></runoob>
</div>
<script>
var Child = {
  template: '<h1>自定義組件!</h1>'
}
new Vue({
  el: '#app',
  components: {
    'runoob': Child// <runoob> 將只在父模板可用
  }
})
</script>

模塊中注冊組件：

<template>
 <BaseInput
  v-model="searchText"
  @keydown.enter="search"
 />
 <BaseButton @click="search">
  <BaseIcon name="search"/>
 </BaseButton>
</template>

<script>
import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}
</script>

 

export和export default

export 和export default 都用來導出模塊，Vue 的單文件組件通常需要導出一個對象，這個對象是 Vue 實例的選項對象，以便於在其它地方可以使用 import 引入。

而 new Vue() 相當於一個構造函數，在入口文件 main.js 構造根組件的同時，如果根組件還包含其它子組件，那么 Vue 會通過引入的選項對象構造其對應的 Vue 實例，最終形成一棵組件樹。

 

export 可以導出多個命名模塊，例如：

//demo1.js
export const str = 'hello world'
export function f(a){
    return a+1
}

對應的引入方式：

//demo2.js
import { str, f } from 'demo1'

 

export default 只能導出一個默認模塊，這個模塊可以匿名，例如：

//demo1.js
export default {
    a: 'hello',
    b: 'world'      
}

對應的引入方式（模塊可以起別名）：

//demo2.js
import obj from 'demo1'

 

父子組件相互調用函數

父調子：

在vue中聲明子組件並設置ref屬性，PageContractDetail是子組件：

 <PageContractDetail ref="contractDetail"></PageContractDetail> 

在代碼中使用this.$refs.子組件ref值.子組件函數() 方式調用：

  this.$refs.contractDetail.initData(row.id); 

 

子調父：

直接使用this.$parent.父函數() 調用即可：

 this.$parent.hideDetail();