vue 探讨同级组件间值的传递（$on,$emit的综合运用）

想法：最近在做一个数据处理分析的系统，页面比较多，一些共用的功能也比较多，于是想起了组件化开发，想着一个组件封装好了就可以在项目的各个地方直接引入，无需再次重复编写。

举例：头部的导航栏抽出，登录模块抽出，登录按钮存放在头部导航栏里，点击按钮的时候显示/隐藏登录模块，（因登录模块在后台页面里的某个地方将再次需要，只是调起的方式不一样）。一开始登录模块默认隐藏状态，点击登录按钮时设置一个变量存放点击的状态为首次点击或再次点击，并将该状态传递给兄弟页面用于判断登录框状态的显示或隐藏。

首先官网上给出的同级组件间值的传递/获取例子是这样子的：

（监听/触发当前实例上的自定义事件。$on：监听；$emit：触发）

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"

那么问题来了，用于把这两个方法牵引起来的vm代表什么呢？其实这个类似于我们的全局变量VUE。在此我们需要先创建这个全局变量，首先我们在任意文件夹下创建一个 eventConn.js，并附上创建的内容：

import Vue from 'vue'
export default new Vue;

接着，我们在指定的子组件中引入并调用这个全局变量即可，引入格式如下：

import Event from '../../assets/js/eventConn.js';

<!--header.vue-->

<template>
    <div>
      <div class="headerbox">
        <div class="headercont">
          <div class="header-logo"><strong></strong></div>
          <div class="header-nav">
            <Menu mode="horizontal" active-name="1">
              <MenuItem name="1">
                <Icon type="ios-paper"></Icon>
                首页
              </MenuItem>
              <MenuItem name="2">
                <Icon type="settings"></Icon>
                我要注册
              </MenuItem>
              <Button type="error" class="but-login" @click="showLogin">登录</Button>
            </Menu>
          </div>
        </div>
      </div>
    </div>
</template>

对登录按钮的点击事件[showLogin]进行处理操作，使用$emit来监听该事件并传递一个参数，其中，参数 flag用于定义登录模块显示/隐藏的初始状态，通过点击时对值的取反操作来更换登录模块的状态（false=!false=true）.

<script type="es6">
import Event from '../../assets/js/eventConn.js';
export default {
  name: '',
  data () {
    return {     
      flag: false
    }
  },
  methods: {
    showLogin(){
      let that = this;
      that.flag = !that.flag;
      Event.$emit("LoginShow",that.flag)
    }
  }
}
</script>

<!--login.vue-->

<template>
    <div>
      <div class="formbox" v-show="isShow">
        <h3>登录</h3>
        <Form ref="formInline" :model="formInline" :rules="ruleInline">
          <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="请输入用户名">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="请输入密码">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem>
            <Button type="success" long  ref="loginBut"  @click="handleSubmit('formInline')">登录</Button>
          </FormItem>
        </Form>
      </div>
    </div>
</template>

使用 v-show来控制登录模块的显示隐藏，当值为true时显示，false则隐藏。$on监听兄弟组件header里的LoginShow事件并接收其传递过来的参数flag的值，同时将改值赋给v-show定义的变量即可控制登录模块的显示/隐藏。

<script type="es6">
import Event from '../../assets/js/eventConn.js';
export default {
  data(){
    return {
      isShow:'',
      formInline: {
        user: '',
        password: '',
      },
      ruleInline: {
        user: [
          { required: true, message: '请填写账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          { type: 'string', min: 6, message: '密码长度不小于6位数', trigger: 'blur' }
        ]
      }
    }
  },
  created:function () {
      let that = this;
      Event.$on('LoginShow',isFlag => that.isShow = isFlag);
  }
}
</script>

<!--home.vue-->

父组件引入两个同级子组件

<template>
<div>
  <conn-head></conn-head>
  <conn-login></conn-login>
</div>
</template>

子组件模块导入

import connHead from '../common/header';
import connLogin from '../login/login';

子组件模块调用

export default {
  name: 'home',
  data () {
    return {
    }
  },
  components:{
    connHead,
    connLogin
  }
}