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组件通信 - 中央事件总线