VUE非父子组件之间的通信

最新推荐文章于 2020-06-14 11:09:14 发布
最新推荐文章于 2020-06-14 11:09:14 发布
阅读量94 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lql_h/article/details/102519096
版权

概述

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

 

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

Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为中央处理组件

this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据

this.$bus.$on('自定义事件名'，fn)//监听自定义事件获取数据

代码1

<!DOCTYPE html>

<html>

<head>

    <title>非父子组件的通信</title>

</head>

<body>

    <div id="app">

      

    </div>



    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">





       var MyHeader={

           template:`

              <div>

              我是头部

              {{ headermsg }}

              </div>

           `,

           data(){

              return {

                  headermsg:'我是头部的信息'

              }

           }

       }

       var MyBody={

           template:`

              <div>我是身体</div>

           `,

       }

       var MyFooter={

           template:`

              <div>我是底部</div>

           `,



       }

       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>

运行效果

 

 

代码2


<!DOCTYPE html>

<html>

<head>

    <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(){

            // 监听sending事件

            // var self=this

            // self.$bus.$on('sending',function(val){

            // self.headermsg=val

            // })

              this.$bus.$on('sending',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>

运行效果 

 

 

 

lql_h
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.0父子组件及非父子组件之间的通信方法
08-31
3. **非父子组件通信** 对于非父子组件间的通信，Vue 2.0 提供了事件总线（Event Bus）或者使用 Vuex 状态管理库。这里我们讨论事件总线的使用： 首先，创建一个全局的 Vue 实例作为事件中心（Event Hub）： ```...
Vue入门八、非父子组件间通讯
weixin_33795806的博客
05-28 98
通过Bus总线机制实施非父子组件通讯1、创建一个空实例（Bus中央事件总线也可以叫中间组件）2、利用$emit $on 触发和监听事件实现非父子组件的通信组件之间使用this.$bus.$on传值之前需要先this.$bus.$off注销事件即：this.$bus.$off('hiHeader').$on('hiHeader', (val) => {this.sending = val})详...
vue基础之事件总线bus（非父子组件传值通信）
qq_45549336的博客
06-14 386
一、说明 事件总线其实就是一种非父子关系的通信方式 二、语法如下 （1）给vue的原型上挂载一个vue实例 Vue.prototype.bus = new Vue() （2）发送事件，发送数据 this.bus.$emit('事件名', 数据) （3）监听事件，获取数据 this.bus.$on('事件名', (数据) => { //对数据进行操作 }) 三、案例代码 <!DOCTYPE htm
Vue入门—非父子组件间的数据传递（Bus）
金金的博客
04-17 199
Vue入门—非父子组件间的数据传递 前一篇文章讲了有关Vue中父子间的数据传递方式 其中我们了解到： 父组件通过属性来像子组件传值 子组件通过事件触发的方式向父组件传值 今天我们一起来学习有关非父子组件间的数据传递 首先我们来看张图 这张图里向我们展示了，在一个网页中Vue可以将其分成多个组件，组件之间也会进行数据传递。 但就上篇文章了解到的，父子组件的传递，应该是1和2/2和3 但如果1和3，...
vue非父子组件通信问题及解决方法
08-27
vue非父子组件通信问题及解决方法 在 Vue 中，非父子组件之间的通信是一件棘手的事情。通常情况下，我们可以使用 props 传递数据从父组件到子组件，但是这种方法无法应用于非父子组件之间的通信。在本文中，我们将...
Vue非父子组件通信详解
08-30
主要为大家详细介绍了Vue非父子组件通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue路由跳转原理（哈希模式）
lql_h的博客
10-12 3036
概述 哈希模式（利用`hashchange` 事件监听 url的hash 的改变） ``` window.addEventListener('hashchange', function(e) { console.log(e) }) ``` 核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后 立刻发起请求，响应整个页面，渲染整个页面...
VUE购物车与我的页面实现
lql_h的博客
09-27 2211
store.js let store=new Vuex.Store({ state: { token:'', cartarry:JSON.parse(localStorage.getItem('cartarry')) || [],//存储购物车商品的数组 }, mutations: { //设置vuex的token settoken(...
VUE首页与分类页的实现
lql_h的博客
09-26 2145
router.js { path: '/botnav', name: 'botnav', component: () => import('./views/Botnav.vue'), children:[ { path: 'index', name: 'index', co...
VUE的slot插槽和ref、$parent
lql_h的博客
10-11 1719
概述 - #### slot插槽 - #### slot就是子组件里给DOM留下的坑位 - #### <子组件>DOM</子组件> - #### slot是动态的DOM - #### ref获取子组件实例 - #### 识别：在子组件或元素上使用属性ref="xxxx" - #### 获取：this.$r...
VUE数据监听watch计算属性computed
lql_h的博客
10-11 608
思考业务场景： 1. 类似淘宝，当我输入某个人名字时，我想触发某个效果 2. 利用vue做一个简单的计算器 概述 watch监听单个，computed监听多个 当watch监听的是复杂数据类型(数组，对象)的时候需要做深度监听（写法如下） watch:{ msg:{ … }, ...
VUE登录页面的开发
lql_h的博客
09-25 379
Chrome手机版调试 组件使用官方网站 https://didi.github.io/cube-ui/#/zh-CN/docs/introduction axios的安装 ##官方文档：http://www.axios-js.com/docs/index.html npm install axios App.vue <...
VUE的引包留坑实例化、插值表达式{{}}
lql_h的博客
10-11 315
代码 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- 留坑 --> <div id="app"></div> <!-- 引包 --> <script type="...
Vue路由的传参与取参
lql_h的博客
10-12 303
概述 1. 查询参数 配置（传参） :to="{name:'login',query:{id:loginid}}" 获取（取参） this.$route.query.id 2.路由参数 配置（传参） :to="{name:'register',params:{id:registerid} }" 配置路由的规则 { name:'detail',path:'/det...
VUE常用指令v-xxx
lql_h的博客
10-11 293
概述 在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。 譬如在HTML页面中这样使用`<div v-xxx=''></div>` 在vue中v-xxx就是vue的指令 指令就是以数据去驱动DOM行为的,简化DOM操作 常用指令 - v-text 不可解析html标签 - v-html 可解析html标签 - v-if 做元...
Vue环境搭建
lql_h的博客
09-24 234
node环境 node是傻瓜式安装的，直接去官网下载安装不断下一步 命令行输入node -v查询版本号，有版本号即安装成功 C:\Users\Administrator\lql3.x>node -v v8.9.3 node自带npm包管理工具（安装好node也可以输入npm -v查看版本号） C:\Users\Administrator\lql3.x>npm -v 5...
VUE单双向数据流及事件绑定
lql_h的博客
10-11 197
概述 #vue单向数据流绑定属性值 v-bind: (属性)，简写:(属性) 例子：`<input v-bind:value="name" v-bind:class="name">` - 单向数据绑定 内存改变影响页面改变 - v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染 vue双向数据流 v-model ，只作用于有value属性的元...
Vue路由的跳转
lql_h的博客
10-12 177
概述 路由的跳转方式有： 1.通过标签：`<router-link to='/login'></router-link>` 2.通过js控制跳转`this.$router.push({path:'/login'})` 区别： this.$router.push() 跳转到指定的url，会向history插入新记录 this.$router.replace() ...
VUE打包APP
lql_h的博客
09-29 139
Vue-cli3打包后出现空白页面的解决 ## vue.config.js module.exports = { publicPath: './', assetsDir: 'static', outputDir: 'dist', …… ##router.js // mode: 'history', Hbuilder打包APP ...
vue3父子组件间通信
最新发布
08-12
在Vue3中，父子组件之间的通信可以通过props和emit来实现。 1. 使用props：父组件可以通过props属性向子组件传递数据。在子组件中，可以通过接收props属性来使用这些数据。在父组件中，可以通过修改props属性的值来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值