vue2 基础学习05 （Vue组件：非父子组件之间的通讯）

时间 2020-01-01

标签 vue2 vue 基础学习组件父子之间通讯繁體版

原文原文链接

前言

我将要实现的是：点击按钮，将组件2中的数据传递给组件1，在组件1中展现。

源代码

能够直接复制执行

<!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>非父子组件中的通讯</title>
      <!-- 开发环境版本，包含了有帮助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <style>
      .componentOne {
          background-color: greenyellow;
          border: 1px solid green;
          width: 250px;
          height: 80px;
          margin-left: 20px
      }
  
      .componentTwo {
          background-color: lightgray;
          border: 1px solid green;
          width: 250px;
          height: 80px;
          margin-left: 20px
      }
  </style>
  
  <body>
      <div id="app">
          <component-one></component-one>
          <component-two></component-two>
      </div>
  
      <script>
          //在vue上面挂载一个$bus做为中央处理组件
          Vue.prototype.$bus = new Vue()
  
          //组件1
          var componentOne = {
              template: '<div class="componentOne">组件1 -- {{fromtwo}}</div>',
              data() {
                  return {
                      onemsg: '我是组件1的数据',
                      fromtwo: '' //接受从组件2传过来的数据
                  }
              },
              created() {
                  //1.这是方法一
                  /*var self = this //先接受 这个实例中的 this
                  this.$bus.$on('sending',function(val){
                      //this.fromtwo = val  //这里不了能够这样写，由于在这个做用域中，this表明的是 $bus中
                      self.fromtwo = val    // 这里的 
                  })*/
  
                  //2.也能够直接用箭头函数
  
                  this.$bus.$on('sending', (val) => { //箭头函数改变了this的指向
                      this.fromtwo = val
                  })
              },
          }
          //组件2
          var componentTwo = {
              template: `<div class="componentTwo">
                              组件2
                              <button @click="toOne">我要将个人数据传给组件1</button>
                          </div>`,
              data() {
                  return {
                      twomsg: '我是组件2的数据',
                  }
              },
              methods: {
                  toOne() {
                      this.$bus.$emit('sending', this.twomsg)
                  }
              },
          }
  
          new Vue({
              el: '#app',
              //声明组件
              components: {
                  'component-one': componentOne,
                  'component-two': componentTwo,
              }
          })
      </script>
  </body>
  
  </html>

演示

总结步骤

建立一个空实例（bus中央事件总线也能够叫中间组件）

利用$emit $on的触发和监听事件实现非父子组件的通讯javascript

Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus做为中央处理组件
this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据
this.$bus.$on('自定义事件名'，fn)//监听自定义事件获取数据

从网上了解到，解决的方案还有 vuex、 provide/inject是解决同根往下派发、本地存储也能够进行非父子组件之间的通讯

这块暂时没学到，待学习。html