兄弟组件之间通过Bus总线传值

最新推荐文章于 2023-09-02 09:27:34 发布

a la

最新推荐文章于 2023-09-02 09:27:34 发布

阅读量405

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/alaAicy/article/details/105222265

版权

VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

兄弟组件之间通过Bus总线传值

Bus是一个空的Vue实例，兄弟组件之间通过一对this.bus.$emit('change',this.number) 和 this.bus.$on('change',function）来传值和监听
$emit(‘触发事件’,要传递的值)
$on(‘触发事件’,操作）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <child content="dell"></child>
    <child content="lee"></child>
</div>
<script>
    //var bus=new Vue();
    Vue.prototype.bus=new Vue()     //创建的每一个vue实例都有bus属性
    Vue.component('child',{
        data:function () {
          return{
              number:this.content
          }
        },
        props:{
            content:String
        },
        template:'<div @click="handleclick">{{number}}</div>',
        methods:{
            handleclick:function () {
                //bus.$emit('change',this.number)
                this.bus.$emit('change',this.number)    //触发当前实例上的事件。附加参数都会传给监听器回调。
            }
        },
        beforeCreate:function () {
            var this_=this
            // bus.$on('change',function (msg) {      //$on监听当前实例上的自定义事件
            //     this_.number=msg
            // })
            this.bus.$on('change',function (msg) {      //$on监听当前实例上的自定义事件
                this_.number=msg
            })
        }
    })
    var vm=new Vue({
        el:"#app",
    })
</script>
</body>
</html>

a la

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
兄弟组件之间通过Bus总线传值

兄弟组件之间通过Bus总线传值Bus是一个空的Vue实例，兄弟组件之间通过一对this.bus.$emit('change',this.number) 和 this.bus.$on('change',function）来传值和监听$emit(‘触发事件’,要传递的值)$on(‘触发事件’,操作）<!DOCTYPE html><html lang="en">&lt...
复制链接

扫一扫

专栏目录