1.爲何要進行組件通訊vue
組件能夠說是具備獨立功能的總體,可是當咱們要將這些組件拼接在一塊兒的時候,這些組件相互之間要創建聯繫,這個聯繫咱們就稱之爲通訊vuex
2.組件通訊的方式有一下幾種數組
1.父子組件通訊app
使用props來實現dom
2.子父組件通訊函數
自定義事件this
3.非父子組件通訊es5
ref鏈code
bus事件總線component
4.多組件狀態共享(多個組件共用同一個數據) 大知識點(vuex) 這邊只講前3個
vuex
知識點: app實例的手動掛載
new Vue({
el:'#app'
}).$mount('#app')
案例:
<body> <div id='app'> <father></father> </div> <template id='father'> <div> <p>這是Father組件</p> <hr> <son :qwer = "money"></son> <!-- 子組件作數據綁定 綁定父組件裏面的數據 --> </div> </template> <template id='son'> <div> <p>這是son組件</p> <p>父親給了我{{qwer}}元</p> <!-- 子組件能夠全局調用這個數據 --> </div> </template> <script> // props // 1.在父組件的模板中將數據用單項數據綁定的形式,綁定在子組件上 // 2.在子組件的配置項中可使用一個props配置項來接收這個數據,接收時,props的取值能夠是一個數組 // 3.在子組件模板中,接收到的屬性能夠像全局同樣使用 // 這裏全局註冊Father這個組件 Vue.component('Father', { template: '#father', data() { return { money: 2000 } } }) // 這裏全局註冊Son這個組件 Vue.component('Son', { template: '#son', props: ['qwer'] //子組件用props來接收這個數據 }) new Vue({ el: '#app' }) </script> </body>
產生的問題:
問題一:props接收的money和子組件上綁定的自定義屬性money是否是同一個? 不是, 綁定自定義屬性名字能夠自定義(我的通常會寫成同樣的) 注意:自定義命名不能有大寫字母 用-a來表示 問題二:爲何data要定義一個函數 1.組件是一個獨立的個體,那麼他應該擁有本身的數據,這個數據應該是一個獨立的數據 2.也就是說這個數據應該有獨立的做用域(須要一個獨立的使用範圍,這個範圍就是這個組件內) 3.函數提供了獨立的做用域 問題三:爲何data要有返回值?返回值仍是一個對象 由於Vue是經過observe來觀察data選項的,因此必需要有返回值 由於Vue要經過es5的Object.defineProperty屬性對對象進行getter和setter設置
<body> <div id="app"> <Father></Father> </div> <template id='father'> <div> <h3>這裏是father組件</h3> <p>兒子給了我{{money}}元錢</p> <Son @give='getHongbao'></Son> <!-- 這裏是第一步! 綁定一個自定義事件在子組件身上 --> </div> </template> <template id='son'> <div> <button @click = 'giveFather'>give</button> <h3>這裏是son組件</h3> </div> </template> <script> Vue.component('Father', { template: '#father', data() { return { money: 0 } }, methods: { getHongbao(val) { console.log(1) this.money = val } } }) Vue.component('Son', { template: '#son', data() { return { hongbao: 500 //要把這個數據發給父組件 , 首先要在父組件中定義一個數據用來接收這個數據 } }, methods: { giveFather() { //如何進行父組件給子組件的自定義事件觸發? // 這裏是第二步驟!!! this.$emit('give', this.hongbao) } } }) new Vue({ el: '#app', }) </script> <!-- 自定義事件 1.自定義的 經過 $on 定義 $emit用來觸發 2.經過綁定在組件身上定義 $emit用來觸發 --> <!-- 總結: 1.在父組件的模板中,經過事件綁定的形式,綁定一個自定義事件在子組件身上 2.在子組件中 (子組件的配置項methods中)寫一個事件處理函數,在事件處理函數中觸發父組件綁定的自定義事件 3.將子組件定義的事件處理函數 綁定在子組件的按鈕身上(點擊觸發 實現步驟2) --> </body>
<body> <div id="app"> <Father></Father> </div> <template id="father"> <div> <h3>這裏是father</h3> <button @click = 'look'>點擊查看father的this</button> <p>father的n: {{ n }}</p> <hr> <Son ref = 'son'></Son> <hr> <Girl ref = 'girl' :n = 'n'></Girl> <!-- 經過ref綁定組件後,咱們發如今他們共同父組件的$refs裏面能夠找到子組件 --> </div> </template> <template id="son"> <div> <h3>這裏是son組件</h3> </div> </template> <template id="girl"> <div> <h3>這裏是girl組件</h3> <button @click = 'out'> 輸出girl的this </button> </div> </template> <script> Vue.component('Father', { template: '#father', data() { return { n: 0 } }, methods: { look() { this.n = this.$refs.son.money } } }) Vue.component('Son', { template: '#son', data() { return { money: 1000 } } }) Vue.component('Girl', { template: '#girl', data() { return { num: 0 } }, methods: { out() { console.log(this) console.log(this.$attrs.n) } } }) new Vue({ el: '#app' }) </script> <!-- 總結:ref鏈能夠實現非父子組件的通訊,可是若是層級太多就比較繁瑣了 --> </body>
<div id='app'> <Bro></Bro> <Sma></Sma> </div> <template id="big"> <div> <h3>這裏是哥哥組件</h3> <button @click = 'hick'>揍</button> </div> </template> <template id="sma"> <div> <h3>這裏是弟弟組件</h3> <p v-show = 'flag'>嗚嗚嗚嗚嗚嗚wuwuwuu</p> </div> </template> <script> var bus = new Vue() Vue.component('Bro', { template: '#big', methods: { hick() { bus.$emit('aa'); } } }) Vue.component('Sma', { template: '#sma', data() { return { flag: false } }, mounted() { var _this = this //當前組件掛載結束,也就是咱們在頁面當中看到真實的dom //mounted這個鉤子函數的觸發條件是組件建立時會自動觸發 bus.$on('aa', function() { _this.flag = true }) } }) new Vue({ el: '#app' }) </script> <!-- 總結: 1.在其中一個組件的掛載鉤子函數上作事件的聲明 2.在另外一個組件中,經過 bus.$emit('事件名稱')來觸發自定義事件 -->
子父通訊
<body> <div id='app'> <Father></Father> </div> <template id='father'> <div> <h3>這裏是father組件</h3> <p>這裏是父組件的n:{{n}}</p> <Son :add = 'add'></Son> </div> </template> <template id='son'> <div> <h3>這裏是son組件</h3> <button @click = 'add(2000)'>give</button> </div> </template> <script> //咱們要進行子父組件通訊 //理解:使用自定義事件實現 Vue.component('Father', { template: '#father', data() { return { n: 0 } }, methods: { add(val) { this.n = val } } }) Vue.component('Son', { template: '#son', data() { return { money: 1000 } }, props: ['add'] }) new Vue({ el: '#app' }) </script> </body>
1.什麼是動態組件
能夠改變的組件
2.使用
經過Vue提供了一個component+is屬性使用
3.動態組件指定就是component這個組件
<div id="app"> <button @click = "change"> 切換 </button> <!-- <keep-alive include=""> <component :is = "type"></component> </keep-alive> --> <component :is = "type"></component> </div> </body> <script> /* 業務: 點擊一個按鈕進行兩個組件的切換 */ Vue.component('Aa',{ template: '<div> Aa </div>' }) Vue.component('Bb',{ template: '<div> Bb </div>' }) new Vue({ data: { type: 'Aa' }, methods: { change () { this.type = (this.type === 'Aa'?'Bb':'Aa') } } }).$mount('#app') </script>