Vue 漸進式JavaScript 框架 基于Vue2的學習筆記 - Vue組件通信 -?中央事件總線

目錄

中央事件總線

圖示

準備工作

設置頁面元素

創建組件

總結

---

中央事件總線

使用vue的監聽和觸發來實現中央事件總線方式。

on監聽 emit觸發，組件按鈕綁定點擊事件，在事件內部觸發。

圖示

準備工作

引入Vue及設置圖片樣式。

準備數據源通過小說網站拿到的json數據；

放在本地json文件中，等待之后請求訪問。

示例如下：

<style>.item img {width: 60px;}
</style>
<script src="../lib/vue.js"></script>

設置頁面元素

創建vue 解析盒子；創建按鈕綁定按鈕事件，渲染列表使用組件。

示例如下：

<div id="box"><button @click="handleAjax">點擊</button><data-item v-for="item in datalist" :key="item.book_id" :mydata="item" @event="handleEvent"></data-item><data-info :info="info"></data-info>
</div>

創建組件

創建列表組件和詳情組件，并使用中央事件總線綁定和監聽組件內部通信。

示例如下：

<script>let bus = new Vue()Vue.component("dataItem", {props: ["mydata"],template:`<div class="item">"<img :src="mydata.cover" />{{mydata.title}}<div><button @click="handleClick">詳情</button></div></div>`,methods: {handleClick() {bus.$emit("zu1", this.mydata.info)}}})Vue.component("dataInfo", {// 組件剛創建好，就開始訂閱data() {return {info: ""}},// 生命周期mounted() {bus.$on("zu1", (data) => {console.log("1111111", data)this.info = data})},template:`<div class="filminfo"> {{info}} </div>`})let vm = new Vue({el:"#box",data: {datalist: [],info : ""},methods: {handleAjax() {fetch("./json/ebook.json").then(res => res.json()).then(res => {console.log(res.data.data)this.datalist = res.data.data})}}})
</script>

效果如下：

總結

Vue 漸進式JavaScript 框架 基于Vue2的學習筆記 - Vue組件通信 -?中央事件總線