一般專案不大就利用事件車，公共的Vue實體進行傳遞資料
一共有兩種寫事件車的方式，下面一一介紹
- 利用$emit發射自定義事件和 $on監聽自定義事件
- $off銷毀事件
一、第一種方式 （創建公共檔案）
src檔案夾下建立公共檔案
// 建立公共的js檔案（事件車），主要用來傳遞資訊
// 引入vue.js
import Vue from 'vue';
// 創建空的vue實體
var event = new Vue();
export default event;home.vue檔案
<template>
<div id="home">
<h2>這是首頁</h2>
<h3>{{list}}</h3>
<h5>{{mymsg}}</h5>
<button @click="biu">發射</button>
</div>
</template>
<script>
// 在需要傳遞資訊的地方引入
import bus from '../eventBus.js'
export default{
data(){
return{
list:['少欲音','正太音','大叔音'],
mymsg:''
}
},
methods: {
biu(){
// 發射一個自定義事件，用來傳遞資訊
console.log(bus);
bus.$emit('biulist',this.list)
}
},
mounted() {// 組件掛載時觸發的鉤子函式
// 接收資訊
bus.$on('msg',val =>{
this.mymsg = val
})
},
}
</script>prodct.vue與首頁毫無關聯的頁面
<template>
<div id="product">
<h2>這是商品頁</h2>
<ul v-for="val in item">
<li>{{val}}</li>
</ul>
<button @click="fn">點擊發射</button>
</div>
</template>
<script>
// 在需要傳遞資料的地方引入
import bus from '../eventBus.js'
export default{
data() {
return {
item:null
}
},
methods: {
fn(){
bus.$emit('msg','這是商品頁傳來的資料')
}
},
mounted() {
// 接收資訊
bus.$on('biulist',val =>{
this.item = val
})
},
}
</script>二、第二種方式直接掛載到原型
在main.js中定義一個新的物件并掛載到vue原型上
Vue.prototype.$bus=new Vue();home頁
methods: {
msg() {
//$emit發送資料攜帶資料
this.$bus.$emit("A", {
name: "張三",
age: 20
});
}
}prodct.vue與首頁毫無關聯的頁面
mounted() {
//$on監聽接收資料，這里注意一般寫在mounted，計算屬性里
this.$bus.$on("A", function(res) {
console.log(res);
});
}兩種方式任選其一哦！小編公_號?前端老實人，可以一起聊天交流學習哦！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298681.html
標籤：其他
上一篇：scratch小瓢蟲找媽媽 電子學會圖形化編程scratch等級考試二級真題和答案決議2021-6
下一篇：?【爆肝萬字】手把手教你SpringBoot+MyBatis+jQuery+HTML5從0開始寫網頁一學就會！（內附原始碼）?