正文
淺談Vue不同場景下組件間的數(shù)據(jù)“交流”
Vue的官方文檔可以說是很詳細了。在我看來，它和react等其他框架文檔一樣，講述的方式的更多的是“方法論”，而不是“場景論”，這也就導致了：我們在閱讀完文檔許多遍后，寫起代碼還是不免感到有許多困惑，因為我們不知道其中一些知識點的運用場景。這就是我寫這篇文章的目的，探討不同場景下組件間的數(shù)據(jù)“交流”的Vue實現(xiàn)
父子組件間的數(shù)據(jù)交流
父子組件間的數(shù)據(jù)交流可分為兩種：
1.父組件傳遞數(shù)據(jù)給子組件
2.子組件傳遞數(shù)據(jù)給父組件
父組件傳遞數(shù)據(jù)給子組件――props
這是組件數(shù)據(jù)溝通中最常見的場景：你讓父組件掌握了數(shù)據(jù)源，然后傳遞給子組件，供子組件使用
許多人會說，這很簡單！用props嘛！ 對，正因如此，它不是我要講的主要內容，不過我們還是用代碼簡單過一遍：
父組件
<template> <div id="father"> {{ '我是父組件' }} <son :text = "text"></son> </div></template><script>import son from './son.vue'export default { data: function () { return { text: '從父組件傳來的數(shù)據(jù)' } }, components: { son: son }}</script><style scoped></style> 子組件：
<template> <div> {{ '我是子組件，我接收了' + text }} </div></template><script>export default { props: { text: { type: String, default: '' } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>demo:
在這個demo里面，我們把“從父組件傳來的數(shù)據(jù)”這一個字符串通過props傳遞給了子組件
如果我們希望在子組件中改變父組件的數(shù)據(jù)的話，可以在父組件中定義一個能改變父組件數(shù)據(jù)的函數(shù)，然后通過props將該函數(shù)傳遞給子組件，并在子組件在適當時機調用該函數(shù)――從而起到在子組件中改變父組件數(shù)據(jù)的效果
子組件傳遞數(shù)據(jù)給父組件
子組件傳遞數(shù)據(jù)給父組件 方式一：回調傳參
父組件：
<template> <div id="father"> {{ '我是父組件,名稱是' + componentName }} <son :changeComponentName = "changeComponentName"></son> </div></template><script>import son from './son.vue'export default { data: function () { return { componentName: '組件A' } }, methods: { changeComponentName: function (newComponentName) { this.componentName = newComponentName } }, components: { son: son }}</script><style scoped> #father div{ padding: 10px; margin: 10px; border: 1px solid gray; }</style> 子組件：
<template> <div> <p>我是子組件：一個button</p> <button @click="() => changeComponentName(newComponentName)"> 把父組件的名稱修改為：彭湖灣的組件 </button> </div></template><script>export default { data: function () { return { newComponentName: '彭湖灣的組件' } }, props: { changeComponentName: { type: Function, default: () => { } } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>demo:
點擊前：
點擊后：
圖解：
點擊子組件（按鈕）的時候，將父組件的名稱從“A”修改為“彭湖灣的組件”
我們從父組件向子組件傳遞了一個函數(shù)（changeComponentName）。并在子組件調用這個函數(shù)的時候，以參數(shù)的形式傳遞了一個子組件內部的數(shù)據(jù)（newComponentName）給這個函數(shù)，這樣，在父組件中定義的函數(shù)（changeComponentName）就可以取得子組件傳來的參數(shù)了
【PS】 命名太長不好意思
子組件傳遞數(shù)據(jù)給父組件 方式二：自定義事件
父組件：
<template> <div id="father"> <div> {{ '我是父組件,我的名稱是:' + fatherComponentName }} <son v-on:changeComponentName = "changeComponentName"></son> </div> </div></template><script>import son from './son.vue'export default { data: function () { return { fatherComponentName: 'A組件' } }, methods: { changeComponentName: function (componentName) { this.fatherComponentName = componentName } }, components: { son: son }}</script><style scoped> #father div{ padding: 10px; margin: 10px; border:1px solid grey; }</style>子組件：
<template> <div> <p>我是子組件:一個按鈕</p> <button @click="clickCallback"> 修改父組件的名稱為：彭湖灣的組件 </button> </div></template><script>export default { data: function () { return { fatherComponentName: '彭湖灣的組件' } }, methods: { clickCallback: function () { this.$emit('changeComponentName', this.fatherComponentName) } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>demo:
點擊前：
點擊后：
圖解：
通過$emit(event, [...參數(shù)])，所有的參數(shù)將被傳遞給監(jiān)聽器回調，也就是我們在父組件中定義的changeComponentName方法，從而實現(xiàn)從子組件中給父組件傳參
兄弟組件間的數(shù)據(jù)交流（有共同父組件的兄弟組件）
父組件：
<template> <div id="father"> <div> {{ '我是父組件:father' }} <eldest-son :text = "text"></eldest-son> <youngest-son :changeText="changeText"></youngest-son> </div> </div> </template><script>import eldestSon from './eldestSon.vue'import youngestSon from './youngestSon.vue'export default { data: function () { return { text: '我是一行文本' } }, methods: { changeText: function () { this.text = '我是經過改動的一行文本' } }, components: { eldestSon: eldestSon, youngestSon: youngestSon }}</script><style> #father div{ border: 1px solid grey; padding: 10px; margin: 10px; }</style>兄弟組件1：
<template> <div> <p>我是兄弟組件：eldestSon</p> <p>我有一個可變數(shù)據(jù)text：{{ text }}</p> </div></template><script>export default { props: { text: { type: String, default: '' } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>兄弟組件2：
<template> <div> <p>我是兄弟組件：youngestSon</p> <button @click="changeText">更改eldestSon兄弟組件中的文本</button> </div></template><script>export default { props: { changeText: { type: Function, default: () => {} } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>點擊前：
點擊后：
圖解：
如果兩個兄弟組件間存在這種數(shù)據(jù)關系的話，我們可以嘗試尋找其共同的父組件，使數(shù)據(jù)和相關方法“提升”到父組件內部，并向下傳給兩個子組件
這樣，其中一個子組件取得了數(shù)據(jù)，另外一個子組件取得了改變數(shù)據(jù)的方法，便可以實現(xiàn)上述的數(shù)據(jù)溝通
【注意】這種場景存在局限性，它要求兩個組件有共同父組件。對于這種場景之外的處理方法，請看下文
全局組件間的數(shù)據(jù)交流――Vuex
我上述的許多場景里面，都運用到了props或者函數(shù)傳參的方式去處理組件間的數(shù)據(jù)溝通。然而在稍大型的應用里面，它們都不約而同地給我們帶來了很大的麻煩
例如：
1.通過props從父組件向子組件傳遞數(shù)據(jù)
對于直接的父子關系的組件，數(shù)據(jù)流顯得很簡潔明確，但在大型應用里面，我們上下嵌套許多個組件的時候，這就會導致我們的代碼非常地繁瑣，并難以維護
2.對于沒有共同的父組件的兄弟組件，函數(shù)傳參的數(shù)據(jù)傳遞方式也無能為力了，Vue文檔里介紹到，你可以通過以$emit和$on函數(shù)為基礎的“事件總線”溝通數(shù)據(jù)，但它無法應對更加大型的應用
這個時候Vuex就成為了實現(xiàn)全局組件間數(shù)據(jù)交流的最佳方案了
Vuex擁有一個包含全部頂層狀態(tài)的單一數(shù)據(jù)源（state）
1.所有的組件都可以使用這個單一數(shù)據(jù)源里面的數(shù)據(jù)
2.所有的組件都可以通過派發(fā) 動作（actions）修改這個單一數(shù)據(jù)源里的數(shù)據(jù)
原本要“走很多彎路”才能實現(xiàn)溝通的數(shù)據(jù)流，一下子就找到了最短的捷徑
實現(xiàn)View層的數(shù)據(jù)和model層的解耦
在1,2小節(jié)中處理的數(shù)據(jù)(Vue)和第三小節(jié)中處理的數(shù)據(jù)(Vuex)，在很多時候是兩種不同類型的數(shù)據(jù)，前者是屬于View層，僅負責單純的UI展示，而model層的大多是從后端取得后注入的數(shù)據(jù)。
一點建議：
1.Vue部分的代碼負責構建View層
2.Vuex部分的代碼負責構建model層
（上述的Vue指的是Vuex之外的框架體系）
以上述兩點為基礎，決定某部分的代碼到底要寫進Vue里面還是寫進Vuex里面，并盡量將兩者分開，從而實現(xiàn)View層和model層的解耦，提高前端代碼的可維護性和擴展性
總結
以上所述是小編給大家介紹的Vue不同場景下組件間的數(shù)據(jù)交流，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
