詳解vue 組件之間使用eventbus傳值

2019-11-19 15:04:59

字體：大中小

供稿：網(wǎng)友

對于前端的我們而言，并非是只有寫界面才是最大的問題，很多的情況下，我們需要關(guān)注的是數(shù)據(jù)，比如js頁面的數(shù)據(jù)傳遞等等，學(xué)習(xí)vue我們也是需要知道怎么去使用數(shù)據(jù)

當(dāng)然，使用存儲(chǔ)也是可以得，但是并非一定要緩存，當(dāng)然在vue中有推薦了我們?nèi)ナ褂胿uex去數(shù)據(jù)交互，Vuex會(huì)讓你的Vue代碼足夠靈活可控，把數(shù)據(jù)統(tǒng)一存入state, 只允許通過Actions觸發(fā)Mutations修改。然而，有時(shí)候我們的項(xiàng)目并沒有復(fù)雜到需要用上Vuex。，（我們也不討論已經(jīng)廢除的vm.$dispatch）很多情況下我們都是需要一個(gè)事件的捕獲，這時(shí)候我們就可以用到vue的eventbus了

受用eventbus的方法很是簡單，我們需要做三步事情，第一步，我們需要?jiǎng)?chuàng)造一個(gè)容器去充當(dāng)我們的eventbus

第二步，我們需要去拋出，或者說提交我們的事件

第三步，我們?nèi)ケO(jiān)聽我們的那個(gè)事件（也許這才是第二部）

首先，我們需要在全局定義我們的eventbus

這里我們定義到了eventbus。這就簡單的完成了我們的第一步，當(dāng)然，全局變量，我想你應(yīng)該知道定義在哪兒的

接著我們先去拋出這個(gè)事件，使用￥。emit去“提交”

怎樣，這點(diǎn)都可以理解吧，其次我們經(jīng)行第三步，去監(jiān)聽

當(dāng)然。這里已經(jīng)監(jiān)聽好的。點(diǎn)擊事件俺只是個(gè)累贅，

接下來我們就要去界面中使用它們了

首先，倒入我們所需要的文件：

這里我使用的是談transimissionone還有transimissiontwo兩個(gè)文件‘

接著是定義

其次是使用

最后運(yùn)行我們的項(xiàng)目，查看下效果

這邊主要是交大家使用，所以代碼就俘虜在下面，主要是四個(gè)文件

transimissionone。vue（發(fā)送事件的文件）

<template>   <div class="transimission1">   <button @click="get">點(diǎn)擊發(fā)送數(shù)值到eventbus中</button>    </div>    </template>  <script>   export default {     name: "transimission1",     methods: {       get: function() {         console.log("Aaa");         eventBus.$emit('eventBusName', "hellokugou");       }     },   } </script>  <style>  </style>

其次是transimissiontwo（監(jiān)聽者）

<template>   <div class="transimissiontwo">     <button @click="method1">點(diǎn)擊console.log出eventbus的信息 </button>   </div> </template>  <script>   export default {     name: "transimissiontwo",     methods: {       method1: function() {         //使用on老監(jiān)聽事件         eventBus.$on('eventBusName', function(val) {　           console.log("這個(gè)是用transimissiontwo的val值為："+val)         })       }     }   } </script> <style>  </style>

接著是我們的中樞。app。vue中使用

<template>   <div id="app">     <click></click>   <transimissiontwo></transimissiontwo>     <transimissionone></transimissionone>   <sendparent @listenertochildevent="getmessagefromchild"></sendparent>     <value :locallogo="netlogo"></value>     <!--無法監(jiān)聽，說明要在那個(gè)組件中-->     <button @listenertochildevent="getmessagefromchild">測試能否監(jiān)聽</button>     <my_plug_in></my_plug_in>     <div class="choose_div">       <ul>          <li>           <router-link to="/foo">foo頁面</router-link>         </li>         <li>           <router-link to="/header">header頁面</router-link>         </li>         <li>           <router-link to="/hello">hello頁面</router-link>         </li>         <li style="clear: both;list-style: none;"></li>       </ul>      </div>      <div class="main">       <router-view class="my_router_iew"></router-view>     </div>     <testmintui></testmintui>   </div> </template>  <script>   import value from './components/value'   import click from "./components/click"   import my_plug_in from "./components/plug_in"   import sendparent from "./components/send_parent"   import testmintui from "./components/Test_mint-ui"   import transimissiontwo from "./components/transimissiontwo"   import transimissionone from "./components/transimissionone"    export default {     name: 'app',     data() {       return {         netlogo: "主頁顯示信息到組件中"       }     },     components: {       value,       click,       my_plug_in,       sendparent,       testmintui,       transimissionone,     transimissiontwo,          },     methods: {       getmessagefromchild: function(data) {         console.log(data);       }     }   } </script>  <style>   body {     background-color: #f8f8ff;     font-family: 'Avenir', Helvetica, Arial, sans-serif;     color: #2c3e50;   }      ul {     width: 12rem;   }      ul li {     list-style: none;   }      ul li:not(:last-child) {     list-style: none;     width: 2rem;     margin-left: 0.1rem;     margin-right: 0.1rem;     float: left;     text-align: center;     background: #2C3E50;     color: white;   }      ul li a {     text-decoration: none;     font-size: 16px;     color: white;     line-height: 1rem;     text-align: center;   }      ul li:nth-child {     list-style: none;     clear: both;   }      .choose_div {     width: 100%;     overflow: scroll;   } </style>

請無視掉沒用的代碼。接著就是定義eventbus了