Vue組件通信&插槽&ElementUI

一、組件通信

• 什麼是組件通信？

  組件通信是指組件與組件之間的數據傳遞

1. 父傳子

   父組件傳遞數據給子組件

2. 子傳父

   子組件中的數據傳回給父組件

3. 組件之間的傳遞

   組件與組件之間可以任意傳遞

4. 父組件與子組件

   在當前組件（父組件）中引入另一個組件（子組件）並且進行聲明和使用，就叫父子關係

• 父傳子

  ①在父組件中調用子組件時，定義屬性，將屬性值傳入子組件中
  ②在子組件中定義 props 屬性，接收從父組件傳入進來的數據
  ③將接收到的數據顯示在頁面上

• 子傳父

  ①在子組件中通過 $emit 觸發父組件的自定義事件，並傳入數據（子組件）
  ②在父組件中調用子組件的位置設置自定義事件
  ③定義事件處理函數，將子組件的值作爲參數傳入

• 組件之間的數據傳遞（總線bus）

  ①在main.js中創建一個空Vue實例，並掛載到Vue原型上成爲總線 $bus
  ②在需要將數據傳遞出去的組件中，觸發總線事件 this.$bus.$emit()，同時傳遞數據
  ③在需要數據的組件中，綁定總線事件 this.$bus.$on()，觸發事件時就能獲取到傳遞過來的數據

二、插槽slot

• 什麼是插槽？

  插槽也是一個數據傳輸方式，在父組件中使用子組件時，將子組件標籤對中間的內容作爲插槽的內容傳遞到子組件中
  子組件通過 slot 標籤進行獲取和使用

1. 默認插槽

   如果沒有傳數據進去，則以默認值爲準

2. 具名插槽

   ①在父組件中使用子組件時，子組件標籤對中間可以寫其它標籤，並且用 slot屬性命名
   ②在子組件中，可以使用<slot name="名稱"><slot>，使用對應的具名插槽

3. 作用域插槽

   ①在子組件中設置作用域數據
   <slot 屬性名 =值 屬性名2=值2></slot>
   ②在父組件中使用slot-scope接收到數據，並使用
   <h3 slot-scope="scope">{{scope.屬性名}}</h3>

4. v-slot指令

   作用
   簡化作用域插槽的寫法

<hello>
	<template v-slot:body="scope">
		<h3>我來組成身體，姓名：{{scope.username}}，年齡：{{scope.age}}歲</h3>
	</template>
</hello>

三、ElementUI

• 什麼是 elementui？

  elementui是餓了麼前端團隊開發出來的一套基於vue2.0的桌面端組件庫

1. 安裝element-ui

   npm i element-ui

2. 配置和註冊

   ①在main.js中引入element-ui
   import ElementUI from ‘element-ui’;
   ②引入全局樣式
   import ‘element-ui/lib/theme-chalk/index.css’;
   ③註冊全局組件
   Vue.use(ElementUI);

3. 使用elementui

   打開官方網站，找到組件，複製代碼粘貼到頁面上