vue学习（十三）发布订阅通讯

最新推荐文章于 2023-08-12 23:50:45 发布

dream21st

最新推荐文章于 2023-08-12 23:50:45 发布

阅读量169

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/qq_36305027/article/details/83757735

版权

vue学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1，参考例子，非父子组件之间的通讯，两个child组件之间通过bus总线来完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <child content="hello"></child>
        <child content="world"></child>
    </div>

    <script>

        Vue.prototype.bus=new Vue();
        Vue.component('child',{
            data:function () {
                return {
                    selfContent:this.content
                }
            },
            props:{
                content:String
            },
            template:'<div @click="handleclick">{{selfContent}}</div>',
            methods:{
                handleclick:function () {
                   this.bus.$emit('change',this.selfContent)
                }
            },
            mounted:function () {
                var that=this;
                this.bus.$on('change',function (msg) {
                    that.selfContent=msg
                })
            }
        })
        var app=new Vue({
            el:"#app",
            data:{
            }
        })
    </script>
</body>
</html>

dream21st

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue学习（十三）发布订阅通讯

1，参考例子，非父子组件之间的通讯，两个child组件之间通过bus总线来完成 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;
复制链接

扫一扫