非父子之间的组件传值，可以使用vuex。简单的状态管理，也可以用vue bus

vue bus可以实现不同组件间、不同页面间的通信，比如我在A页面出发点击事件，要B页面发生变化，使用方法如下：

全局定义：main.js

window.eventBus = new Vue()
 
在A页面的事件中触发：
eventBus.$emit('todo', '123')
 
在B页面的created中开始监听，越早监听越好：
eventBus.$on('todo', (params) => {
         console.log(params)
})
 下面我来一个例子
<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>非父子组件传值（bus/总线/发布订阅模式/观察者模式）</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="app">

        <child content="Dell"></child>

        <child content="Lee"></child>

    </div>

    <script>

    Vue.prototype.bus = new Vue();

    Vue.component('child',{

        data:function(){

            return {

                selfContent:this.content

            }

        },

        props:{

            content:String

        },

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

        methods:{

            handleClick:function(){

                //由于bus是vue的一个实例，所以它有$emit这个方法,change就是一个随意的名字，可以改成aaa

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

            }

        },

        mounted:function(){

            var this_= this;

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

                this_.selfContent=msg;

            })

        }

    })

    var vm= new Vue({

        el:'#app',

        data:{},

        methods:{

        },

    })

    </script>

</body>

</html>

当然也可以参考一些其他人的博客，注意理解

https://www.jianshu.com/p/5b383e66c117

http://www.cnblogs.com/fanlinqiang/p/7756566.html

 

vue中非父子组件的传值bus的使用的更多相关文章

  1. vue.js单文件组件中非父子组件的传值

    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...

  2. Vue中非父子组件传值的问题

    父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...

  3. Vue.js父子组件如何传值 通俗易懂

    父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...

  4. Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)

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

  5. 关于Vue中父子组件相互传值

    Header为子组件,Home为父组件,通过子组件调用父组件 运行结果如下 下面是父组件调用子组件的案例 通过button按钮的click事件 图一是父组件Home中的run方法,图二是msg和fun ...

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

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

  7. Vue父子，子父，非父子组件之间传值

    Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...

  8. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  9. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

随机推荐

  1. UML期末复习题——2.1：Use Case Diagram

    第一题:用例图 重要概念: 1.采用参与者和参与者目标的观点: 一组用例实例,每个实例是系统所执行的一系列活动,以此产生对特定参与者具有价值的客观结果. 短语“对特定参与者具有价值的客观结果”是细微而 ...

  2. CentOS7下安装php-redis扩展

    yum -y install php70w-pecl-redis

  3. java批量修改指定目录下的文件名

    package io; import java.io.File; import java.io.IOException; /** * @Auther: Code * @Date: 2018/9/9 1 ...

  4. error C2086: “int WINGDIAPI”: 重定义

    1>------ 已启动生成: 项目: OSG_3_1_osgViewer应用基础, 配置: Debug x64 ------1>cl : 命令行 warning D9002: 忽略未知选 ...

  5. 免费的HTML5版uploadify

    转http://www.cnblogs.com/lvdabao/p/3452858.html var defaults = { fileTypeExts:'',//允许上传的文件类型,格式'*.jpg ...

  6. leetcode 求一个字符串的最长回文子串

    最长回文子串问题:给定一个字符串,求它的最长回文子串长度.如果一个字符串正着读和反着读是一样的,那它就是回文串.   给定一个字符串,求它最长的回文子串长度,例如输入字符串'35534321',它的最 ...

  7. intel 酷睿core系列cpu的类型：U M H HQ MQ

    相对于笔记本来说.一般我们说的intel系列cpu是指应用于desktop桌面版,embedded嵌入式版, mobile移动版 桌面版和移动版cpu对比 http://tieba.baidu.com ...

  8. unity三维地球模型生成

    准备一张贴图   创建材质球 球面坐标系转直角坐标系 x=rsinθcosφ. y=rsinθsinφ. z=rcosθ. 效果如下   脚本如下 using System.Collections; ...

  9. useJDBC4ColumnNameAndLabelSemantics设置后无效，怎么办？

    连接的是DB2数据库, 在查询语句中有SELECT COLUMNNAME AS ALIASNAME FROM TABLE这样的结构时, 会报如下错误: Caused by: com.ibm.db2.j ...

  10. 【ARM-Linux开发】ti CMEM使用

    1.CMEM Overview http://processors.wiki.ti.com/index.php/CMEM_Overview 2.Changing the DVEVM memory ma ...