vue组件之间互相传值:兄弟组件通信

我们在项目中经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex。有几种方法:

方法一:先子传父,再父传子

思路:子传父:首先我们在 a.vue 组件中 ,给按钮 botton 绑定一个 handleClick 事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数。示例中我们通过this.$​emit() 去触发 isLogFn 这个方法自定义事件,并将 log 参数传递出去。我们要在父组件中去监听这个自定义事件,去触发对应的方法,并接受 a 组件传过来的参数。此时我们就完成了子组件向父组件传值的过程。然后 b 组件中需要创建 props,定义一个 isLog 属性,这个属性就是我们传过来的数值。然后我们在计算属性中处理这个数据,最终供b组件使用。示例中,我们在 v-show=”isLogin” 中用来控制弹窗是否打开。

  • a.vue 子组件

    <template>
      <div class="adiv">
        <p>a组件</p>
        <button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
      </div>
    </template>
    <script>
    export default {
      methods: {
        handleClick () {
          this.$emit('isLogFn','log')
        }
      }
    }
    </script>
    <style>
    .adiv{
      width: 400px;
      height: 200px;
      border: 1px solid #000;
      margin: 0 auto;
    }
    </style>
  • app.vue 父组件

    <template>
      <div id="app">
        <aPage @isLogFn = "lisLogFn"></aPage>
        <bPage :isLog = "login"></bPage>
      </div>
    </template>
    <script>
    import aPage from './components/a.vue'
    import bPage from './components/b.vue'
    export default {
      data () {
        return {
          login: 'false'
        }
      },
      name: 'app',
      components: {
        aPage,
        bPage
      },
      methods: {
        lisLogFn (data) {
          if (data == 'log') {
            this.login = 'true'
          }
        }
      }
    }
    </script>
  • b.vue 子组件

    <template>
      <div class="bdiv" v-show="isLogin">我是组件B弹窗</div>
    </template>
    
    <script>
    export default {
      props: ['isLog'],
      data () {
        return {
    
        }
      },
      //不能直接使用这个props,一定要经过computed处理,因为props是单项数据流,当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,否则Vue 会在控制台给出警告。
      computed: {   
        isLogin () {
          if(this.isLog == 'true'){
            return true
          } else {
            return false
          }
        }
      }
    }
    </script>

方法二:借助中央事件总线

  1. 第一步:借助中央事件总线:在外部新建一个js文件,取名Bus.js,可放在assets文件夹目录下。
  2. 第二步:两个组件作为子组件被同一个父组件所引用,在同一个页面显示。
  3. 两个兄弟组件之间的语法:组件1需要定义一个发送数据的方法,此处 sendMsg 是定义在此的方法,页面点击时候触发此函数,函数主体,通过 Bus 中央事件总线用 $emit 发送一个 send 事件,事件的功能就是传送一个 this.a++ 的数据,区分 sendMsgsend ,前者是当前页面的点击事件,后者是发送出去,需要其他组件监听的事件。

参考链接

vue组件之间互相传值:兄弟组件通信