Vue 组件通信 - 中央事件总线-优快云博客

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>

效果如下：