<!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. CentOS7搭建FastDFS+Nginx

    1. FastDFS 介绍 FastDFS是一个开源的分布式文件系统,她对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负载均衡的问题.特别适合以文件 ...

  2. Linux服务器安装系统之1-LSI阵列卡Raid10配置方法

  3. 牛客练习赛14 D比较月亮大小　（实现）

    链接:https://ac.nowcoder.com/acm/contest/82/D来源:牛客网 题目描述 点点是一名出色的狼人.众所周知,狼人只有在满月之夜才会变成狼. 同时,月亮的大小随着时间变 ...

  4. Django【第12篇】：Django之中间件

    自定义验证规则以及中间件简单介绍 1.python2和python3中的区别 对于python2内置的字符串类型有str和unicode 比如:"abc"是字符串,u"你 ...

  5. 【01】Python 环境变量、条件判断、循环、基本运算符

    1 环境变量 1.1 Windows下环境变量 系统变量Path中要加入Python安装路径: C:\xxxx\Python36;C:\xxxx\Python36\Scripts; 2 条件判断 2. ...

  6. Windows Server2008R2蓝屏，分析dmp文件

    使用Windbp PreView打开dmp文件后,在命令栏输入如下命令: !analyze -v 解析结果中蓝色字体为错误原因分析

  7. css3 宽度百分比减去固定宽度 无效问题

    一定要注意中间横线的间距才有效果 正确 width: calc(50% - 10px); 错误 width:calc(50%-10px);

  8. SpringBoot拦截器和 Servlet3.0自定义Filter、Listener

    官方文档译文 Spring Boot 包括对嵌入式Tomcat,Jetty和Undertow服务器的支持.大多数开发人员使用适当的“Starter”来获取完全配置的实例.默认情况下,嵌入式服务器在 p ...

  9. Django REST framework入门 （转自中文文档）

    快速入门 我们将创建一个简单的允许管理员用户查看和编辑系统中的用户和组的API. 项目设置 创建一个名为 tutorial 的新django项目,然后启动一个名为 quickstart 的新app. ...

  10. 《Vue前端开发手册》

    序言 为了统一前端的技术栈问题,技术开发二部规定开发技术必须以Vue为主. 为了更好的规范公司的前端框架,现以我前端架构师为主,编写以下开发规范,如有不当的地方,欢迎批评教育并慢慢改善该开发文档,谢谢 ...