的我們而言，並非是只有寫介面才是最大的問題，很多的情況下，我們需要關注的是資料，比如js頁面的資料傳遞等等，學習vue我們也是需要知道怎麼去使用資料

當然，使用儲存也是可以得，但是並非一定要快取，當然在vue中有推薦了我們去使用vuex去資料互動，Vuex會讓你的Vue程式碼足夠靈活可控，把資料統一存入state, 只允許通過Actions觸發Mutations修改。然而，有時候我們的專案並沒有複雜到需要用上Vuex。，（我們也不討論已經廢除的vm.$dispatch）很多情況下我們都是需要一個事件的捕獲，這時候我們就可以用到vue的eventbus了

受用eventbus的方法很是簡單，我們需要做三步事情，第一步，我們需要創造一個容器去充當我們的eventbus

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

第三步，我們去監聽我們的那個事件（也許這才是第二部）

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

這裡我們定義到了eventbus。這就簡單的完成了我們的第一步，當然，全域性變數，我想你應該知道定義在哪兒的

接著我們先去丟擲這個事件，使用￥。emit去“提交”

怎樣，這點都可以理解吧，其次我們經行第三步，去監聽

當然。這裡已經監聽好的。點選事件俺只是個累贅，

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

首先，倒入我們所需要的檔案：

這裡我使用的是談transimissionone還有transimissiontwo兩個檔案‘

接著是定義

其次是使用

最後執行我們的專案，檢視下效果

這邊主要是交大家使用，所以程式碼就俘虜在下面，主要是四個檔案

transimissionone。vue（傳送事件的檔案）

<template>
	<div class="transimission1">
	<button @click="get">點擊發送數值到eventbus中</button>	
	</div>
	
</template>

<script>
	export default {
		name: "transimission1",
		methods: {
			get: function() {
				console.log("Aaa");
				eventBus.$emit('eventBusName', "hellokugou");
			}
		},
	}
</script>

<style>

</style>
 

<template>
	<div class="transimissiontwo">
		<button @click="method1">點選console.log出eventbus的資訊
</button>
	</div>
</template>

<script>
	export default {
		name: "transimissiontwo",
		methods: {
			method1: function() {
				//使用on老監聽事件
				eventBus.$on('eventBusName', function(val) {　
					console.log("這個是用transimissiontwo的val值為："+val)
				})
			}
		}
	}
</script>
<style>

</style>

<template>
	<div id="app">
		<click></click>
	<transimissiontwo></transimissiontwo>
		<transimissionone></transimissionone>
	<sendparent @listenertochildevent="getmessagefromchild"></sendparent>
		<value :locallogo="netlogo"></value>
		<!--無法監聽，說明要在那個元件中-->
		<button @listenertochildevent="getmessagefromchild">測試能否監聽</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>

window.eventBus = new Vue();