对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线)

<body>

  <div class="app">

    <child content = "dell"></child> //这两个子组件之间可以互相传值

    <child content = "lee"></child>

  </div>

</body>

<script>
//每一个vue实例对象上都能访问到同一个vue实例

  Vue.prototype.bus = new Vue()

  Vue.component("child",{

    template:' <div @click="handleClick">{{selfContent}}</div>',

    data:function(){

      return{

        selfContent:this.content

      }

    },

    props:{

      content:{

        type:String

      }

    },

    methods:{

      handleClick:function(){

        console.log(this.selfContent)
//单击的时候 在第三方Vue实例上触发change事件并且将this.selfContent传递过去

        this.bus.$emit('change',this.selfContent)

      }

    },

    mounted:function(){

        let this_ = this
//在页面元素渲染完成后 为第三方Vue实例 -- this.__proto__.bus 注册监听change事件

        this.bus.$on('change',function(msg){

          alert(0)

          this_.selfContent = msg

        })

      }

  })

  const app = new Vue({

    el:'.app'

  })

vue bus方式解决非父子组件间的传值的更多相关文章

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue组件定义方式，vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

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

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  5. vue非父子组件间传参问题

    最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...

  6. vue非父子组件间通信

    有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...

  7. 非父子组件通过事件传值-vue

    1.创建中央事件总线:额外的 new Vue()2.$emit 触发事件3.$on 监听事件 在使用组件的文件中: <template> <div> <x-test :b ...

  8. Angular 非父子组件间的service数据通信

    完成思路:以service.ts(主题subject---订阅sbuscribe模式)为数据中转中间件,通过sku.ts的数据更改监测机制,同步更改service.ts中的数据,同时buy.ts组件实 ...

  9. Vue非父子组件之间的传值

    1.新建一个js文件  然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...

随机推荐

  1. 个人总结-7- 实现图片在MySQL数据库中的存储，取出以及显示在jsp页面上

    昨天主要是进行对数据库的内容提取出来并进行动态显示,这个只需要设置一个servlet从数据库中获取数据即可,只是图片比较特殊,不能显示. 今天准备继续找方法来实现图片得录入和显示到jsp中,准备从网上 ...

  2. LeetCode33 搜索旋转排序数组

    搜索旋转排序数组 题目描述: 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标 ...

  3. 辉光的UIView

    辉光的UIView 辉光UIView使用了一个UIView的一个category,名为UIView+Glow,请自行到github上查找. 源码如下: // // RootViewController ...

  4. cygwin64-安装包管理工具

    1.dos command, install pkg $ setup-x86_64.exe -q -P curl $ setup-x86_64.exe -q -P lynx 2. cygwin64 c ...

  5. 微信小程序及各种平台对接常用可逆加密算法aes256

    不同程序之间经常会交换数据,我们经常采用的套路是: 假设要传输的信息是json,我们假设其为json_data,通过http传递信息为 json_data_encode=json_data&s ...

  6. Linux命令--压缩解压(简化版)

    Linux tar.gz.tar.bz2.zip 等解压缩.压缩命令详解(简化版) Linux 常用的压缩与解压缩命令有:tar.gzip.gunzip.bzip2.bunzip2.compress ...

  7. Codeforces-19D Point---线段树

    题目链接: https://cn.vjudge.net/problem/CodeForces-19D 题目大意: n个操作,在200000*200000的平面上加删点 find 严格在坐标右上角,x最 ...

  8. zk集群的快速搭建

    1.上传一个zk.tar2.解压3.创建目录data4.修改zoo_sample.cfg ---> zoo.cfg5.修改文件的dataDir改为/data目录,echo 1 >/data ...

  9. POJ2318 TOYS

    嘟嘟嘟 题面:先告诉你一个矩形抽屉的坐标,然后\(n\)个隔板将抽屉分成了\(n + 1\)格(格子从\(0\)到\(n - 1\)标号),接下来随机输入\(m\)个玩具的坐标.问最后每一个格子里有多 ...

  10. Web项目打成war包部署Tomcat时运行startup.bat直接闪退部署失败解决方案

    即上篇通过将web项目打成war包部署到Tomcat服务器,解决mysql问题后,又出现了新问题,真是一波三折,所以将解决过程分享给大家,希望能帮助到小伙伴们~ 将打好的war包拷贝到Tomcat的w ...