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> ~~~