Vue学习笔记九：非父子组件通信

最新推荐文章于 2024-07-22 15:13:59 发布

INAGIML

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量66

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_45283247/article/details/104707647

版权

Vue学习笔记九：非父子组件通信

Vue版本：2.5.21

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

     <!-- 
         非父子组件之间的通信
            建立bus总线机制实施非父子组件通讯
               *创建一个空实例（bus中央事件总线也可以叫中间组件）
               *利用$emit,$on的触发和监听事件来实现非父子组件的通信
                     Vue.prototypr.$bus=new Vue() 在Vue上挂载一个$bus作为中央处理组件 
                     this.$bus.$emit('自定义事件名'，"传递的数据") 触发自定义事件传递数据
                     this.$bus.$on("自定义事件名"，fn)监听自定义事件获取数据

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

    <div id="app"></div>
    <script src="../vue.js"></script>
    <script>

        Vue.prototype.$bus=new Vue()

        var MyHeader={
            template:
            `
            <div>我是头部{{headmsg}}</div>
            `,
            data(){
                return{
                    headmsg:'我是头部的信息'
                }
            },
            created(){
                // var self=this
                // self.$bus.$on("sending",function(val){
                //     self.headmsg=val;
                // })
                this.$bus.$on('sending',val=>{
                    this.headmsg=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",
            template:`
              <div>
                <MyHeader></MyHeader><hr>
                <MyBody></MyBody><hr>
                <MyFooter></MyFooter><hr>
              </div>
            `,
            data(){
                return{
                    
                }
            },
            components:{
                MyHeader,
                MyBody,
                MyFooter
            }
        });
    </script>
</body>
</html>

效果

在这里插入图片描述

INAGIML

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记九：非父子组件通信

Vue学习笔记九：非父子组件通信Vue版本：2.5.21<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...
复制链接

扫一扫