首頁 > 文章 > web前端 > vuejs使用$emit和$on進行元件間的傳值

vuejs使用$emit和$on進行元件間的傳值

小云云原創: 2018-01-27 16:56:071661瀏覽

$emit和$on可以實現元件之間的傳值，我們知道父元件傳值給子元件使用props，但是不允許子元件傳值給父元件，這時候使用這個就可以實作了。本文主要介紹了vuejs使用$emit和$on進行組件之間的傳值的範例，具有一定的參考價值，有興趣的可以了解一下，希望能幫助到大家。

注意：$emit和$on的事件必須在一個公共的實例上，才能夠觸發。

範例：我要實現某個系統的通訊錄功能，在web端我們可以使用基於jQuery的ztree插件來實現目錄的展現，但是在vuejs框架裡面，tree目錄需要透過遞歸元件來實現。

1、現在有兩個元件，父元件contact_index.vue，子元件cust_tree.vue

2、點選父元件裡面的選擇銀行，跳出銀行樹目錄結構（使用vuejs的遞歸組件實現）,這裡面需要做兩種傳值：

（1）父組件透過props將樹目錄的資料list傳到子組件中形成目錄結構的展示；

（2）子組件裡面透過點擊對應的銀行請求查詢銀行的通訊錄，這裡面需要將點擊的銀行的機構代碼回傳給父元件，父元件接收後透過input將機構代碼提交給後台請求查詢；

第一種是父元件給子元件傳值使用props即可，現在我們來談談第二種情況，如何將子組件的值回傳給父組件。

網上百度千篇一律全是使用$emit來實現，可是都有一個嚴重的誤區沒有給別人說明，開始我都按照搜索的結果進行操作，都會出現子組件$emit後父組件沒有監聽到函數的變化，研究了好久才發現$emit和$on的事件必須在一個公共的實例上，才能夠觸發。我的操作如下：

首先在src目錄下新加bus.js作為一個公共的實例

import Vue from &#39;vue&#39;

export var bus = new Vue()

其次，父元件在created裡面定義$on監聽事件

//父组件与子组件都要import bus.js
import {bus} from &#39;../../bus.js&#39;

created(){
  bus.$on(&#39;custTreeSay&#39;,(id)=>{
  //监听传值--机构代码
  this.instCode = id;
  //关闭弹窗
  this.popupVisibleTree = false;
  //调用查询方法刷新通讯录列表
  this.query();
  });
  bus.$on(&#39;custTreeSayName&#39;,(name)=>{
  //监听传值--机构名称
  this.instName = name;
  });
}

最後，在子元件中定義點選事件，呼叫父元件方法透過$emit將對應值傳給父元件

<span @click="propInstCode(model);propInstName(model)">
 {{model.name}}
</span>

<script type="text/javascript">
 import {bus} from &#39;../../bus.js&#39;
 export default {
  props: [&#39;model&#39;],//这里通过props接收父组件的传值
  
  //method钩子定义传值方法，这边需要传不同的值
  methods: {
  //通过总线将值传给父组件
  propInstCode:function (model) {
  //$emit触发当前实例事件
  bus.$emit(&#39;custTreeSay&#39;,this.model.id);
  },
  propInstName:function (model) {
  bus.$emit(&#39;custTreeSayName&#39;,this.model.name);
  }
 },
 }

這樣就實作了子元件能透過$emit將值傳給bus在傳給父元件了，最後是透過傳的機構代碼傳給提交給後台查詢的，但是我們同時也需要相應的機構名字來給客戶展現，所以這裡面只需要設置兩個input就行了，機構代碼的input隱藏起來，需要傳值，另外的機構名稱的input顯示出來就可以了，如下：

//将点击跳出目录选择的方法放到显示的机构选择就可以了
<p class="query_condition_item">
 <label>选择机构</label>
 <input name="instName" v-model="instName" readonly @click="showTree()">
</p>

<p class="query_condition_item">
 <input name="instCode" v-model="instCode" hidden>
</p>

vuejs使用$emit和$on進行元件間的傳值

相關文章