Vue第九课非父子组件之间的通信

最新推荐文章于 2022-02-28 01:47:28 发布

qq_43538170

最新推荐文章于 2022-02-28 01:47:28 发布

阅读量150

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43538170/article/details/112386026

版权

本文介绍了在Vue.js中如何实现非父子组件之间的通信，通过创建一个全局的事件总线（$bus）利用$emit和$on方法来传递和接收数据。此外，还提到了其他解决方案，如Vuex、provide/inject以及本地存储。示例代码展示了如何在实际项目中应用这种通信方式。

摘要由CSDN通过智能技术生成

非父子组件之间的通信

创建一个空实例（bus中央事件总线也可以叫中间组件）

利用$emit $on的触发和监听事件实现非父子组件的通信

Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为中央处理组件
this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据
this.$bus.$on('自定义事件名'，fn)//监听自定义事件获取数据

解决的方案还有vuex、provide/inject是解决同根往下派发、本地存储也可以进行非父子组件之间的通信

例示代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非父子组件之间的通讯</title>
</head>
<body>
        <div id="app"></div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
        //声明一个空的组件
        Vue.prototype.$bus=new Vue()
        //声明兄弟组件
        var MyHeader={
            template:`
            <div>我是头部{{headermsg}}</div>
            `,
            data(){
                return{
                    headermsg:'我是头部的信息'
                }
            },
            created(){
                //如果没有下面这一行，则this指向的是myheader
                var self=this
                this.$bus.$on('sending',function(val){
                    this.headermsg=val
                })
            }
        }
        var MyBody={
            template:`
            <div>我是身体</div>
            `
        }
        var MyFooter={
            template:`
            <div>我是尾部<button @click='sendhead'>我要跟头部通信</button></div>
            `,
            methods:{
                sendhead(){
                    this.$bus.$emit('sending','我是底部的数据')
                }
            }
        }
        new Vue({
            el:'#app',
            components:{
                MyHeader,
                MyBody,
                MyFooter
            },
            template:`
               <div>
                 <my-header></my-header><hr>
                 <my-body></my-body><hr>
                 <my-footer></my-footer>
               </div>
            `,
            data(){
                return{}
            }, 
        })
        </script>
        
</body>
</html>

qq_43538170

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue第九课非父子组件之间的通信

非父子组件之间的通信创建一个空实例（bus中央事件总线也可以叫中间组件）利用$emit $on的触发和监听事件实现非父子组件的通信Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为中央处理组件this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据this.$bus.$on('自定义事件名'，fn)//监听自定义事件获取数据解决的方案还有vuex、provide/inject是解决同根往下派发、本地存储
复制链接

扫一扫