vue組件的基本使用，以及組件之間的基本傳值方式
阿新 • • 發佈：2019-03-20
傳遞 警告 傳遞數據 cnp 事件 one 3.0 會有 過去 組件（頁面上的每一個部分都是組件）
1.三部分：結構（template），樣式（style），邏輯（script）
2.組件的作用：復用
3.模塊包含組件
4.組件創建：
1.全局組件:Vue.component();
2.局部組件：components（）;
參數1：組件的名稱
參數2：組件的配置項
*組件的配置項：
1.new Vue這個裏面有什麽參數，那麽組件的配置項中就有什麽參數，包含生命周期
2.組件內部多了一個屬性template
3.組件內部的data不在是一個對象，而是一個函數
組件的使用：
1.直接將組件的名稱當做標簽使用即可
2.組件名稱首字母必須大寫
5.腳手架的使用
1.安裝：
3.0 cnpm install @vue/cli -g
2.9.3 cnpm install vue-cli -g
2.創建項目
3.0 vue create <項目名稱>
2.9.3 vue init webpack <項目名稱>
6..組件間的傳值（組件之間的通訊）
一.父子通信
1.父傳子
傳遞：當子組件在父組件當做標簽使用的時候，通過給子組件綁定一個自定義屬性，值為需要傳遞的數據
接收：在子組件內部通過props進行接收
接收方式有兩種：
1.一種是數組接收，2.另一種是對象接收
一般情況下我們都使用對象進行接收，因為對象接收可以校驗數據的類型
eg：
props:["val"];
props:{
val:String//當這個是number的時候，就會有警告
}
2.子傳父
（1）傳遞：當子組件給父組件傳遞數據的時候，通過調用父組件給子組件綁定的自定義事件，然後將傳遞過去
接收：父組件通過自定義事件的函數來接收子組件傳遞過來的數據（註意這個自定義方法的函數在綁定的時候不需要加（））
（2）作用域插槽
二、 非父子
1.在vue的原型身上添加一個公共的vue實例，組件之間調用這個公共的實例的$on and $emit來傳遞數據，傳遞的一方調用$emit,接收的一方用$on;
2.手動封裝$on $emit $off（原理應用了觀察者模式）
3.EventBus
4.vuex
vue組件的基本使用，以及組件之間的基本傳值方式