Vue — bus非父子组件通信

>[success] # bus 非父子组价通信 ~~~ 1.常见的几种传递，子传父，父传子，非父子组件通信 ~~~ >[info] ## 子传父/父传子综合案例 ~~~ 1.父传子使用props，子组件在使用的时候会在props中专门定义一个值，这 值用来完成父传子的中间站，子组件在自己的作用域中直接，调用这个中间 件，进而完成子组件中使用父组件的内容 2.子传父比较特别，他是通过在调用组件的时候，在组件上绑定了个方法， 举个例子说明: '' 正常来说 v-on 后面会跟一些已知的事件例如click，input，change，keyup 等，但是子传父绑定的是一个自定义名称，myChange 是父组件methods， 中的一个方法，在调用的时候，我们会通过子组件中的一个方法进行驱动例 如:'操作父组件的子组件方法' 上面这个案例中'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 语法糖的缘故 ~~~ ~~~ ~~~ >[info] ## 兄弟组件通信 ~~~ 1.兄弟组件在同一地方使用的两个组件 2.兄弟间的通信其实就是一个组件通过子传父改变父组件内容，然后另一个 组件接受这个父组件的改变值，形成父传子 ~~~ >[danger] ##### 案例 ~~~ 1.下面案例中myCom2 完成父传子和子传父，将子传父改变的值交给了， myCom3 组件，进而改变myCom2 组件内容 ~~~ ~~~ ~~~ >[info] ## 使用bus兄弟组件通信 ~~~ 1.上面的案例是必须有一个父组件在中间做'桥梁'，这个'桥梁'来完成兄弟传递 2.可以使用bus 更简单的完成这个传递 3.首先要创建一个vue实例 用来做这个桥梁 4.使用 $on(eventName) 监听事件 5.使用 $emit(eventName) 触发事件 6.其实本质利用的就是'发布订阅解决思想模式' ~~~ >[danger] 案例 ~~~ ~~~ >[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，这个视图是用来传出值的 ~~~ ~~~ * 在视图组件中创建一个tel.vue，这个视图是用来接受值的 ~~~ ~~~ * 我在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 创建好对应的命名视图，然后访问这连接 ~~~ ~~~