Vue 组件通信 - 中间人模式-CSDN博客

本文链接：https://blog.csdn.net/json_ligege/article/details/146149297

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue组件通信 - 中间人模式

中间人模式

兄弟组件间通信

数据来源于某小说网站，可以根据这个格式自行设置假数据。

点击按钮获取数据，示例如下：

设置页面元素和事件

设置按钮和渲染列表及按钮点击事件后，进行渲染列表。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item img {
            width: 60px;
        }
    </style>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleAjax">点击</button>
    <data-item v-for="item in datalist" :key="item.book_id" :mydata="item"></data-item>
</div>
<script>
    let vm = new Vue({
        el:"#box",
        data: {
            datalist: []
        },
        methods: {
            handleAjax() {
                fetch("./json/ebook.json")
                .then(res => res.json())
                .then(res => {
                    console.log(res.data.data)
                    this.datalist = res.data.data
                })
            }
        }
    })
</script>
</body>
</html>

封装组件

对列表渲染内容进行封装为组件，示例如下：

Vue.component("dataItem", {
    props: ["mydata"],
    template:`<div class="item">
    <img :src="mydata.cover" />
    {{mydata.title}}
    </div>`
})

效果：

点击后，渲染列表，效果如下：

组件间通信

为了展示组件间如何通信，增加原有列表需求，可以互动查看小说详情简介。

增加详情按钮

在原有列表组件中增加详情按钮和点击按钮触发的事件。

在事件内打印获取到的该小说简介内容。

示例如下：

Vue.component("dataItem", {
    props: ["mydata"],
    template:`<div class="item">
    <img :src="mydata.cover" />
    {{mydata.title}} <button @click="handleDetail">详情</button>
    </div>`,
    methods : {
        handleDetail() {
            console.log(this.mydata.info)
        }
    }
})

增加监听事件

给子组件增加监听事件，这样就可以在子组件中触发父组件的事件，进行通信。

父组件增加触发事件处理，在父组件中赋值全局变量。

示例如下：

<div id="box">
    <button @click="handleAjax">点击</button>
    <data-item v-for="item in datalist" :key="item.book_id" :mydata="item" @event="handleEvent"></data-item>
</div>
<script>
    Vue.component("dataItem", {
        props: ["mydata"],
        template:`<div class="item">
        <img :src="mydata.cover" />
        {{mydata.title}} <button @click="handleDetail">详情</button>
        </div>`,
        methods : {
            handleDetail() {
                console.log(this.mydata.info)
            }
        }
    })
    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
                })
            },
            handleEvent(info) {
                console.log("父组件定义", info)
                this.info = info
            }
        }
    })
</script>

子组件触发

把详情内容传递给父组件-通过父监听事件。

示例如下：

Vue.component("dataItem", {
    props: ["mydata"],
    template:`<div class="item">
    <img :src="mydata.cover" />
    {{mydata.title}} <button @click="handleDetail">详情</button>
    </div>`,
    methods : {
        handleDetail() {
            this.$emit("event", this.mydata.info)
        }
    }
})

详情组件

设置详情组件渲染

示例如下：

<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>

封装详情组件

示例如下：

Vue.component("dataInfo", {
    props: ["info"],
    template:`<div class="info">
    {{info}}
    </div>`
})

效果：

总结

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue组件通信 - 中间人模式