非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）

最新推荐文章于 2022-08-08 21:14:57 发布

xiaoweibaba

最新推荐文章于 2022-08-08 21:14:57 发布

阅读量374

点赞数

分类专栏： vue 文章标签： vue 非父子组件传值 bus

本文链接：https://blog.csdn.net/xiaoweidreamy/article/details/83539553

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图（点击一个数据A，数据B会变成数据A）
$emit, $on
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.5非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <child content="Mom"></child>
    <child content="Dad"></child>
</div>
<script>
    Vue.prototype.bus = new Vue()
    Vue.component('child',{
        props: {
            content:String
        },
        data: function () {
            return {
                selfContent: this.content
            }
        },
        template: '<div @click="handleClick">{{selfContent}}</div>',
        methods: {
            handleClick: function () {
                this.bus.$emit('change',this.selfContent)
            }
        },
        mounted: function () {
            var this_ = this
            this.bus.$on('change',function (msg) {
                this_.selfContent = msg
            })
        }
    });
    var vm = new Vue({
        el: '#app'
    })
</script>
</body>
</html>

xiaoweibaba

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）

效果图（点击一个数据A，数据B会变成数据A）$emit, $on代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;4.5非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）&lt
复制链接

扫一扫