『壹』 Vue組件的使用
通過ref來獲取頁面上的dom
若在一個組件<item>中添加上ref，那麼獲取到的dom就是對應的組件，也就是可以獲取到組件的引用。
可以獲取到組件中定義的data數據
父組件傳值給子組件通過屬性來傳。
過來的值賦值給定義的值，然後修改那個值
子組件通過事件觸發來向父組件傳值
定義一個全局組件
父組件給子組件通過屬性傳遞一些值，而子組件做的一些約束就是組件的參數校驗
父組件要傳一個名叫content的屬性，而子組件剛好定義了content的prop，這個就是props特性
非props特性
例如：給子組件的標簽中定義一個click事件
上面的實現是錯誤的，原因就是在子組件中定義的@click中的click是監聽的自定義事件的名稱，它是接收子組件觸發的事件名稱，如：this.$emit('click')，@click是接收這樣的事件的，並不是我們熟知的點擊事件
實現上面的例子
方法一：
方法二
在click中添加.native就可標明為原生事件
方法一，使用Vuex
方法二，使用發布訂閱模式，也稱為匯流排機制
怎麼使父組件給子組件優雅的傳遞dom，例如父組件要給子組件傳遞<p>Dell</p>
按以往的方法應該是
使用slot可以解決問題
如果template中有多個<slot>，那怎麼確定哪個slot要那些dom呢
可以通過名稱來確定對應的dom，如
通過動態組件來怎麼實現呢
切換的時候，每次都是先銷毀，然後再創建子組件，每次切換都銷毀和創建
v-once就是為了避免這種情況的發生，使用v-once第一次展示的時候，會將組件放到內存中，第二次就不需要創建組件了，可以直接從內存中讀取到
參考
Vue.js API文檔
慕課網：Vue2.5開發去哪兒網App 從零基礎入門到實戰項目
『貳』 vuex的基本使用
作用 ：
它採用集中式存儲管理應用的所有組件的狀態。（統一管理所有組件中公用的數據）
組成：
state：管理所有的狀態（數據）
getter：state 的計算屬性
mutations：用來操作 state
用法 ：
1.0 定義
// 在 store/index.js 中
export default new Vuex.Store ({state:{userInfo:''}})
2.0 使用
// 在 .vue(組件) 中
// // 取值
this.$store.state.userInfo
// // 賦值
this.$store.state.userInfo={}
總結：
在 vuex 中，如果要給 vuex 中的數據賦值，不能直接得到 state 去賦值，這樣不配合 vuex 設計規范
vuex - mapState 基本使用
它是 vuex 中 state 對應的一個輔助函數
mapState：可以用來簡化 vuex 中 state 中屬性的使用
步驟：
導入
import { mapState } from 'vuex'
定義
computed:{...mapState(["state中的屬性名"])}
使用
this.state中的屬性名 === this.$store.state.state中的屬性名
vuex - mutations 的使用
在 vuex 中，如果要給 state 中的屬性賦值，建議大家藉助 mutation 來賦值
步驟：
1.0 在 mutations 中定義賦值方法
// 在 store/index.js 中
export default new Vuex.Store({
state: { userInfo: ' ' },
mutations: { setUserInfo ( state, payload ) {
state.userInfo = payload
}
}})
2.0 在組件中調用方法
// 在 .vue(組件) 中
// 取值
this.$store.state.userInfo
// 賦值
this.$store.commit('setUserInfo', data)
vuex - mapMutaions 基本使用
mapMutaions ： 可能用來簡化 vuex 中的 mutations 中方法的調用
步驟：
導入 mapMutations
import { mapMutaions } from 'vuex'
定義方法：
methods:{...mapMutations(['setUserInfo'])}
使用方法：
this.setUserInfo('abc')
總結：
vuex：
state：管理狀態
取值：
this.$store.state.xxx
...mapState(['xxx']) 或者 ...mapState({ myname: 'xxx' })
mutaions
取值：
this.$store.commit('xxx', payload)
...mapMutations(['xxx']) 或者 ...mapMutations({ myname: 'xxx' })
『叄』 Vuex簡單使用
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
如果一份數據需要在多個組件中使用，組件間傳值又比較復雜，就可以使用vuex託管數據。
state選項： 定義狀態（狀態就是數據）。
mutations選項： 定義修改狀態的方法（注意：這裡面只能定義同步方法）。
$store： 返回的是當前項目中的全局狀態對象。
commit()方法： 用於執行指定的mutations裡面的方法。
在組件中，直接通過$store.state就可以獲取到全局狀態對象管理的狀態數據，直接渲染到頁面。
state選項： 定義狀態（狀態就是數據）。
通過 $store.state.數據名 使用。
getters選項： 定義計算屬性。方法的參數是狀態對象。
通過 $store.getters.屬性名 使用計算屬性。
mutations選項： 定義修改狀態的方法（注意：這里的方法一般都是同步方法）。方法的第一個參數是狀態對象，第二個參數是新值。
通過 commit() 方法，調用mutations裡面的方法。
actions選項： 定義操作狀態的方法（這里的方法可以定義非同步方法）。
注意： actions里的方法最好不要直接操作state狀態，而是通過調用mutations裡面的方法去修改狀態。所以，actions直接操作的是mutations。
通過 dispatch() 方法，調用actions裡面定義的方法。
由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（mole）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊。
namespaced屬性： 默認情況下，action、mutation 和 getter 是注冊在全局命名空間的。通過設置namespaced屬性為true，將action、mutation 和 getter全部注冊到私有命名空間中。
要從私有模塊中獲取數據，方式是： $store.state.模塊名稱.模塊的數據 。
要從私有模塊中獲取計算屬性，方式是： $store.getters['模塊名/計算屬性'] 。
調用私有模塊裡面的mutations定義的方法，方式是： $store.commit('模塊名/方法名',新值) 。
調用私有模塊裡面的actions定義的方法，方式是： $store.dispatch('模塊名/方法名',新值) 。
直接在模板中使用全局狀態管理數據，表達式會寫的很長。所以可以使用計算屬性。
通過映射函數mapState、mapGetters、mapActions、mapMutations，可以將vuex.store中的屬性映射到vue實例身上，這樣在vue實例中就能訪問vuex.store中的屬性了，便於操作vuex.store。
如果vuex裡面state的數據名稱 跟 頁面中的計算屬性名稱相同，就可以使用 mapState 映射函數，自動生成頁面中的計算屬性。
如果vuex裡面getters的數據名稱 跟 頁面中的計算屬性名稱相同，就可以使用 mapGetters 映射函數，自動生成頁面中的計算屬性。
注意： 如果要映射模塊裡面的state/getters，函數的第一個參數設置為模塊的名稱。
如果定義的方法名跟全局管理對象中mutations裡面的方法名相同，並且定義的方法會帶有一個參數，通過參數傳遞數據。滿足該規則，就可以使用 mapMutations 映射函數生成方法。
如果定義的方法名跟全局管理對象中actions裡面的方法名相同，並且定義的方法會帶有一個參數，通過參數傳遞數據。滿足該規則，就可以使用 mapActions 映射函數生成方法。
注意： 如果要映射私有模塊中mutations/actions裡面的方法，函數的第一個參數設置為模塊的名稱。
『肆』 vuex的幾種調用方法
就是子組件給自己加的一把鎖，不讓父組件輕易的訪問進來
第一種： 直接調用
第二種： 輔助函數
第三種： 僅做了解
第四種：輔助函數的 升級版