Vue.js學習筆記--4. 組件的基本使用

整理自官網教程 -- https://cn.vuejs.org/

　　1. 所有Vue組件同時也都是Vue實例，分為全局組件和局部組件，註冊方式如下。　　

<div id="app">
    <my-component></my-component>
    <child-component></child-component>
</div>
<div id="example">
    <my-component></my-component>
    <!--在#app內局部註冊的組件在此無法被渲染 -->
    <child-component></child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('my-component', { //全局組件，建議使用短橫線分隔式命名組件
  template: '<div>A custom component!</div>'
})
var Child = {
    template: '<div>A child component!</div>'
}
var app = new Vue({
    el: '#app',    
    components: { //局部組件，僅可在父作用域#app中使用
    'child-component':Child
    }　　
})
var example = new Vue({
    el:'#example'
})
</script> 

　　註意：

　　a. 如<ul>、<table>和<li>、<tr>等父子元素有限制的元素，不能直接使用組件模板，可由is屬性來指定，如<tr is="my-row"></tr>。若使用來自以下來源之一的字元串模板（允許嵌入表達式的字元串字面量），則沒有這些限制：

　　1) <script type="text/x-template">

　　2) JavaScript 內聯模板字元串:　　　　

　　　　Vue.component('component1',{
　　　　　　template: '<tr><td>child component</td></tr>'
　　　　});
　　　　Vue.component('component2',{
　　　　　　template: '<table><component1></component1></table>'
　　　　});

　　3) .vue 組件

　　b. 組件實例中 data 必須是一個函數，否則會給每個組件實例返回對同一個對象的引用

　　2. 父子組件組合使用

　　a. 父組件傳遞數據給子組件

　　　　1) 在子組件中由props聲明預期數據。

　　　　2) 屬於單向數據流，子組件不能直接修改prop。

　　　　3) 若要設置prop類型驗證，則不能用字元串數組，應定義:

　　　　　　props:{

　　　　　　　　 propA: Number,

　　　　　　　　 propB: [String, Number]

　　　　　　}

　　　　4) 若要添加非prop屬性，則在使用子組件時，在標簽中設置該屬性="true"。

　　b. 子組件觸發父組件事件

　　　　1) 利用 $on(eventName) 監聽事件和 $emit(eventName,optionalPayload) 觸發事件。

　　　　2) 結合定義的空實例，也可允許非父子組件的通信。

　　c. 父子組件數據組合--利用插槽slot

　　　　1) 子組件中設置<slot>，父組件可分發內容到預設slot或指定slot="slotName"。

　　　　2) 父組件中設置slot-scope="props"，可獲取子組件slot標簽的屬性。

　　　　3) 需註意父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯。

　　3. 其他

　　a. 通過 v-bind:is = "componentObject"，可動態切換組件。若要緩存切出去的組件，則為其添加父元素<keep-alive>。

　　b. 在子組件中設置 ref="xx" ,可由 child = vm.$refs.xx 操作子組件。 -- 只是一種緊急手段。