Vue -- bus非父子組件通信 · Vue&&TypeSprict--基礎總結

>[success] # bus 非父子組價通信 ~~~ 1.常見的幾種傳遞，子傳父，父傳子，非父子組件通信 ~~~ >[info] ## 子傳父/父傳子綜合案例 ~~~ 1.父傳子使用props，子組件在使用的時候會在props中專門定義一個值，這值用來完成父傳子的中間站，子組件在自己的作用域中直接，調用這個中間件，進而完成子組件中使用父組件的內容 2.子傳父比較特別，他是通過在調用組件的時候，在組件上綁定了個方法，舉個例子說明: '<my-Com2 @fun="myChange"></my-Com2>' 正常來說 v-on 后面會跟一些已知的事件例如click，input，change，keyup 等，但是子傳父綁定的是一個自定義名稱，myChange 是父組件methods，中的一個方法，在調用的時候，我們會通過子組件中的一個方法進行驅動例如:'<button @click="changeParent">操作父組件的子組件方法</button>' 上面這個案例中'changeParent' 是子組件一個方法，在這個方法中去觸發 '$emit' 來進而的控制父組件的方法，進而改變父組件例如: changeParent(){ // 根據上面的介紹原則等號左面的屬于子組件的右面屬于父組件 // 因此fun是子組件的,告訴自己的組件的點擊事件，點擊后觸發 // $emit,讓他去找參數中和func綁定的父組件的方法 // 第二個參數可以往父組件傳值 this.$emit('fun','我是傳值') } ~~~ >[danger] ##### 牛逼案例 ~~~ 1.這個案例是結合父傳子和子傳父同時使用的一個案例，要記住的是 v-model 是一個語法糖，這個語法糖綁定是input 事件，因此handleInput，中'$emit' 操控的就是這個input 事件，為了可以讓子組件可以，獲取父組件初始化input值，用在子組件定一個props['value'] 來接受這個父組件的value ，因為v-model 語法糖分解后事 @input='一個事件' v-bind:value='input值' ，所以子組件中的props:['value'] 用的是value 用來完成父傳子。 2.下面的案例雖然沒子傳父是控制，父組件的方法，然而父組件中沒有方法，僅控在子組件控制了'input' 就是現實是因為v-model 語法糖的緣故 ~~~ ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <my-Com2 v-model="inputValue"></my-Com2> {{inputValue}} </div> <template id="sapp"> <div> <input @input="handleInput" :value="value"> </div> </template> <script type="text/javascript"> let myCom2 = { template:'#sapp', props:['value'], // data(){ // return { // value:"" // } // }, methods:{ handleInput(event){ const value = event.target.value this.$emit('input', value) } } }; var vms = new Vue({ el: "#app", data:{ inputValue:"測試" }, components:{ myCom2 , } }) </script> </body> </html> ~~~ >[info] ## 兄弟組件通信 ~~~ 1.兄弟組件在同一地方使用的兩個組件 2.兄弟間的通信其實就是一個組件通過子傳父改變父組件內容，然后另一個組件接受這個父組件的改變值，形成父傳子 ~~~ >[danger] ##### 案例 ~~~ 1.下面案例中myCom2 完成父傳子和子傳父，將子傳父改變的值交給了， myCom3 組件，進而改變myCom2 組件內容 ~~~ ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <my-Com2 v-model="inputValue"></my-Com2> <my-Com3 v-bind:content="inputValue"></my-Com3> </div> <template id="sapp"> <div> <input @input="handleInput" :value="value"> </div> </template> <template id="sapp1"> <div> {{content}} </div> </template> <script type="text/javascript"> let myCom2 = { template:'#sapp', props:['value'], methods:{ handleInput(event){ const value = event.target.value this.$emit('input', value) } } }; let myCom3 = { template:'#sapp1', props:{ content:{ type:String, default:"" } } }; var vms = new Vue({ el: "#app", data:{ inputValue:"測試" }, components:{ myCom2 , myCom3 , } }) </script> </body> </html> ~~~ >[info] ## 使用bus兄弟組件通信 ~~~ 1.上面的案例是必須有一個父組件在中間做'橋梁'，這個'橋梁'來完成兄弟傳遞 2.可以使用bus 更簡單的完成這個傳遞 3.首先要創建一個vue實例用來做這個橋梁 4.使用 $on(eventName) 監聽事件 5.使用 $emit(eventName) 觸發事件 6.其實本質利用的就是'發布訂閱解決思想模式' ~~~ >[danger] 案例 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script type="text/javascript" src="lib/vue.js"></script> </head> <body> <div id="box"> <child1></child1> <child2></child2> </div> <script type="text/javascript"> var bus = new Vue();//空vue實例 var child1 = { template:` <div>child1 <button @click="handleClick()">click</button> </div> `, data(){ return { text:"來自child1的問候" } }, methods:{ handleClick(){ //傳text 給 child2. // bus.$emit("kerwin",this.text); } } } var child2 = { template:` <div>{{innerHTML}}</div> `, data(){ return { innerHTML : "child2" } }, mounted(){ //組件加載完成這個方法會被調用， console.log("child2 mounted"); //監聽事件， ajax ， bus.$on("kerwin",(data)=>{ this.innerHTML = data; }) } } // vm.$mount("#box") new Vue({ el:"#box", components:{ child1, child2 } }) </script> </body> </html> ~~~ >[danger] ##### vue-ui 使用bus 案例 ~~~ 1.創建一個空的vue實例來作為交互的中介 2.接收的時候在mounted生命周期去接受 3.在lib 中創建一個bus.js 用來創建這個第三方 ~~~ * bus.js ~~~ import Vue from 'vue' const Bus = new Vue(); export default Bus ~~~ * 在視圖組件中創建一個email，這個視圖是用來傳出值的 ~~~ <template> <div> <button @click="handleClick">點擊</button> </div> </template> <script> export default { name: "email", methods:{ handleClick(){ // 通過emit 給bus 提交一個保存的值 // 第一個參數是保存進bus 的key，第二個參數保存在bus，key對應的value this.$bus.$emit('on-click','傳遞值') }, }, mounted(){ console.log(this.$bus) } } </script> <style scoped> </style> ~~~ * 在視圖組件中創建一個tel.vue，這個視圖是用來接受值的 ~~~ <template> <div> <h2>{{message}}</h2> </div> </template> <script> export default { name: "tel", data(){ return{ message:"", } }, mounted(){ this.$bus.$on('on-click',mes=>{ this.message = mes }) }, } </script> <style scoped> </style> ~~~ * 我在router 文件下的router.js 對兩個路由的配置 ~~~ { path:'/name_view', components:{ email:()=>import('@/views/email.vue'), tel:()=>import('@/views/tel.vue'), } }, ~~~ * 在 main.js 注冊這個bus ~~~ import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import Bus from './lib/bus' Vue.config.productionTip = false; // 注冊bus Vue.prototype.$bus = Bus; new Vue({ router, store, render: h => h(App) }).$mount('#app'); ~~~ * 在App Vue 創建好對應的命名視圖，然后訪問這連接 ~~~ <router-view name="email"></router-view> <router-view name="tel"></router-view> ~~~