<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

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

</head>

<body>

    <div id="app">

        <zyx content='zyx'></zyx>

        <zyx content='zy'></zyx>

    </div>

</body>

<script>

    /*

    把Vue实例赋值给 Vue.prototype 的 bus 属性上 ，以后每次调用Vue或者创建组件的时候，都会有bus这个属性。

    因为new的实例或者组件都是通过Vue这个类创建的。

    在Vue的prototype上挂载了bus属性

     */

    Vue.prototype.bus = new Vue();  

    Vue.component('zyx',{

        data:function(){

            return {

                selfContent : this.content //因为子组件的props里的值不能修改父组件，所以先把值赋值给另一个变量

            }

        },

        props:{

            content:String  //content必须是个string类型

        },

        template:'<div @click="clickHander()">{{selfContent}}</div>',

        methods: {

            clickHander(){

                //向bus上触发一个change事件，并把参数传递过去

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

            }

        },

        //监听生命周期函数

        // created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

    // mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

        mounted:function(){

            //监听change事件

            var _this = this;

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

                _this.selfContent = msg;

            })

        },

    })

    let vm = new Vue({

            el:'#app',

    });

</script>

</html>

Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）的更多相关文章

  1. vue bus方式解决非父子组件间的传值

    对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...

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

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

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

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

  4. vue非父子组件间通信

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

  5. vue中兄弟组件间 的传值 bus(可以理解为公共交通)

    点击大儿子(头部组件的年月日,下面的都要变化) 就相当于点击了年月日之后,下面的组件重新调接口,参数变化       1.首先随便哪儿写个bus.js 内容如下: import Vue from 'v ...

  6. 【vue】父子组件间通信----传值

    官方文档参考 (一)父组件 向 子组件 传值 ①在父组件中调用子组件处,绑定要传的数据data1, 如 <nav  :data1=" "  ></nav> ...

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

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

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

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

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

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

随机推荐

  1. PAT Basic 1041 考试座位号 (15 分)

    每个 PAT 考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位.正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生的考试座位号码,考试时考生需要换到考 ...

  2. VB之Collection---Collection集合类

    你看到的这个文章来自于http://www.cnblogs.com/ayanmw 由于要对一些数据进行处理,比较麻烦,实现某个算法要处理大量不同的不同类型的数据. 所以考虑到一些因素,又在使用VB6( ...

  3. bzoj3754 Tree之最小方差树 最小生成树+推性质

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=3754 题解 感觉这个思路挺神仙的. 后悔没有好好观察题目的数据范围,一直把 \(n\) 和 \ ...

  4. RPC协议解析

    RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.简言之,RPC使得程序能够像访问本地 ...

  5. 【前端】CSS基础

    3种html中设置css的方法: head中style标签 head中link标签rel属性.href后跟css文件目录 在需要使用css样式的标签添加style属性 1.CSS选择器 #id值 .c ...

  6. Spring源码构建

    1.下载spring源码并解压 https://codeload.github.com/spring-projects/spring-framework/zip/v5.0.2.RELEASE 打开bu ...

  7. linux运维、架构之路-禅道环境搭建

    一.介绍            禅道项目管理软件是国产的开源项目管理软件,专注研发项目管理,内置需求管理.任务管理.bug管理.缺陷管理.用例管理.计划发布等功能,实现了软件的完整生命周期管理. 禅道 ...

  8. for-in语句和with语句、break和continue语句

    for-in语句 for-in语句是一种精准迭代语句,可以用来枚举对象的属性,用以遍历一个对象的全部属性. for…in声明用于对数组或者对象的属性进行循环操作: for…in循环中的代码每执行一次, ...

  9. JS中包含6种错误类型

    1.SyntaxError(语法错误) 解析代码时发生的语法错误 eg:var 1a; Uncaught SyntaxError: Unexpected number 2.ReferenceError ...

  10. ACM 求全排列（字典序、邻位对换、递增进位制数，递减进位制数）

    字典序:(联合康托展开就也可以按照中介数求) 邻位对换.递增进位制数,递减进位制数:具体的实现和算法讲解如下: 代码..C++版的实现并不好..因为是挨个向后找的,如果K很大的时候会超时,不过...思 ...