Vue元件

元件需要註冊後才可以使用，註冊分為全域性註冊和區域性註冊。

全域性註冊

全域性註冊後任何Vue例項都可以使用，子元件必須在父例項建立前註冊。

Vue.component('component-name', {
	template: '<div>{{ message }}</div>',
    data: function () {
    	return {message: '元件內容'}
    }
});

component-name是元件的自定義標籤名稱，推薦使用小寫字母加減號分割的形式命名。

Vue.component方法的第二個引數是一個物件字面量，可以包含template

區域性註冊

app = new Vue({
	el: '#app',
    components: {
    	'component-name': {
        	template: ''
        }
    }
});

在Vue例項中使用components選項區域性註冊元件，註冊後的元件只在該例項作用域下有效。

元件通訊

所謂通訊即元件之間傳遞資料，元件關係可分為父子元件通訊、兄弟元件通訊、跨級元件通訊。

父元件向子元件傳遞資料

元件的props

父級向子元件傳遞資料，可分為3步：

1. 父元件使用子元件時，在子元件標籤新增資料屬性
2. 子元件props選項宣告從父級接受的資料
3. 在子元件中應用從父級接受的資料

<div id="app">
    <my-component message="來自父元件的資料"></my-component>
</div>

<script>
    Vue.component('my-component', {
    	template: '<div>{{ message }}</div>',
        props: ['message']
    });
    
    var app = new Vue({
    	el: '#app'
    });
</script>
 

props選項傳入一個物件型別，對從父級接受的資料進行校驗。

子元件向父元件傳遞資料

Vue通過自定義事件，實現子元件向父元件傳遞資料：

1. 子元件通過$emit(eventName, eventArgument)方法觸發自定義事件
2. 父元件使用子元件時，在子元件標籤使用v-on指令監聽自定義事件

<div id="app">
    <my-component @shownumber="handleShownumber"></my-component>
    <p>數值：{{ total }}</p>
</div>

<script>
    Vue.component('my-component', {
    	template: '<div @click="handleAdd"></div>',
        data : function () {
        	return {counter : 0};
        },
        methods : {
        	handleAdd: function () {
            	this.counter++;
                this.$emit('shomnumber', this.counter);
            }
        }
    });
    
    var app = new Vue({
    	el: '#app',
        data: {
    		total: 0
    	},
        methods: {
        	handleShownumber: function (total) {
            	this.total = total;
            }
        }    
    });
</script>

可以通過v-model替代步驟2中的v-on的事件監聽

<div id="app">
    <my-component v-model="total"></my-component>
    <p>數值：{{ total }}</p>
</div>

<script>
    Vue.component('my-component', {
    	template: '<div @click="handleAdd"></div>',
        data : function () {
        	return {counter : 0};
        },
        methods : {
        	handleAdd: function () {
            	this.counter++;
                this.$emit('shomnumber', this.counter);
            }
        }
    });
    
    var app = new Vue({
    	el: '#app',
        data: {
    		total: 0
    	}
    });
</script>

中央事件匯流排

1. 建立空的Vue例項，作為中央事件匯流排
2. 子元件觸發事件時，指定事件發起者為中央事件匯流排（$emit方法的呼叫方是中央事件匯流排例項）
3. 父元件在mounted鉤子函式裡監聽來自中央事件匯流排的事件

<div id="app">
    <my-component></my-component>
    <p>數值：{{ total }}</p>
</div>

<script>
    var bus = new Vue();
    
    Vue.component('my-component', {
    	template: '<div @click="handleAdd"></div>',
        data : function () {
        	return {counter : 0};
        },
        methods : {
        	handleAdd: function () {
            	this.counter++;
                bus.$emit('shomnumber', this.counter);
            }
        }
    });
    
    var app = new Vue({
    	el: '#app',
        data: {
    		total: 0
    	},
        mounted: function () {
            	var _this = this;
            	bus.$on('shownumber', function (total) {
                	_this.total = total;
                })
            }
    });
</script>

內容分發：slot

具名插槽

子元件模板中的<slot>標籤新增name屬性指定插槽名字

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父元件分發的內容包裹在<template>中，使用v-slot指令 指定分發的插槽名字

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

<template>元素中的所有內容都將會被傳入相應的插槽。任何沒有被包裹在帶有v-slot的<template>中的內容都會被視為預設插槽的內容 .

v-slot只能新增在 <template>元素上

作用域插槽

父級模板裡的所有內容都是在父級作用域中編譯的；子模板裡的所有內容都是在子作用域中編譯的

為了讓父級中的插槽內容能訪問子元件資料，引入作用域插槽：

1. 子元件<slot>元素繫結子元件資料

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

繫結在<slot>元素上的 attribute 被稱為插槽 prop

2. 父元件使用v-slot訪問子元件繫結的插槽prop

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

所有插槽prop會繫結到slotProps變數上