這次帶給大家vue組件之間的傳值方式，vue組件之間傳值的注意事項有哪些，下面就是實戰案例，一起來看一下。
對於前端的我們而言，並非是只有寫介面才是最大的問題，很多的情況下，我們需要關注的是數據，例如js頁面的數據傳遞等等，學習vue我們也是需要知道怎麼去使用資料
當然，使用儲存也是可以得，但是並非一定要緩存，當然在vue中有推薦了我們去使用vuex去數據交互，Vuex會讓你的Vue代碼足夠靈活可控，把數據統一存入state,
只允許透過Actions觸發Mutations修改。然而，有時候我們的專案並沒有複雜到需要用Vuex。 ，（我們也不討論已經廢除的vm.$dispatch）很多情況下我們都是需要一個事件的捕獲，這時候我們就可以用到vue的eventbus了
受用eventbus的方法很簡單，我們需要做三步驟事情，第一步，我們需要創造一個容器去充當我們的eventbus
第二步，我們需要去拋出，或者說提交我們的事件
第三步，我們去監聽我們的那個事件（也許這才是第二部）
#
首先，我們需要在全域定義我們的eventbus
#
這裡我們定義到了eventbus。這就簡單的完成了我們的第一步，當然，全域變量，我想你應該知道定義在哪裡的
#
接著我們先去拋出這個事件，使用￥。 emit去「提交」
怎樣，這點都可以理解吧，其次我們經行第三步，去監聽
當然。這裡已經監聽好的。點擊事件俺只是個累贅，
接下來我們就要去介面中使用它們了
首先，倒入我們所需要的文件：
這裡我使用的是談transimissionone還有transimissiontwo兩個檔案『
接著是定義
其次是使用
最後運行我們的項目，查看下效果
#
這邊主要是交大家使用，所以程式碼就俘虜在下面，主要是四個檔案
#
transimissionone。 vue（發送事件的檔案）
<template>
<p class="transimission1">
<button @click="get">点击发送数值到eventbus中</button>
</p>
</template>
<script>
export default {
name: "transimission1",
methods: {
get: function() {
console.log("Aaa");
eventBus.$emit('eventBusName', "hellokugou");
}
},
}
</script>
<style>
</style>登入後複製
其次是transimissiontwo（監聽人）
<template>
<p class="transimissiontwo">
<button @click="method1">点击console.log出eventbus的信息
</button>
</p>
</template>
<script>
export default {
name: "transimissiontwo",
methods: {
method1: function() {
//使用on老监听事件
eventBus.$on('eventBusName', function(val) {
console.log("这个是用transimissiontwo的val值为："+val)
})
}
}
}
</script>
<style>
</style>登入後複製
接著是我們的中樞。 app。 vue中使用
<template>
<p 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>
<p class="choose_p">
<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>
</p>
<p class="main">
<router-view class="my_router_iew"></router-view>
</p>
<testmintui></testmintui>
</p>
</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_p {
width: 100%;
overflow: scroll;
}
</style>登入後複製
請無視掉沒用的程式碼。接著就是定義eventbus了
window.eventBus = new Vue();
登入後複製
就這樣，很是簡單
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
Angular4實作3d效果
#AngularJS實作select二級連動下拉選單步奏詳解
以上是vue組件之間的傳值方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
