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