<!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. Linux架构--------Rsync守护进程推和拉

    一.Rsync基本概述 rsync是一款开源.快速.多功能.可实现全量及增量的本地或远程数据同步备份的优秀工具.rsync软件适用于Unix/linux/Windows等多种操作系统平台. 二.Rsy ...

  2. element隐藏组件滚动条scrollbar使用

    可使用 组件 <el-scrollbar></el-scrollbar> 设置 组件的样式 为 高度100% <el-scrollbar style="heig ...

  3. windows 安装php

    php各个版本下载地址:https://www.apachelounge.com/viewtopic.php?t=6359 https://museum.php.net/ https://www.fu ...

  4. linux-lampweb

    http://www.lampweb.org/linux/2/6.html      

  5. canvas合并两张图片

    解析: 原理是一样的 画多张图需要一张一张画 也就是等图片onload成功后处理 这里代码写的比较随意 实际用的时候可以小粉转一下 也非常简单.我懒~~ 么么.. newImage(text) { / ...

  6. Linux php.ini的安全优化配置

    Linux php.ini的安全优化配置   (1) PHP函数禁用找到 disable_functions = 该选项可以设置哪些PHP函数是禁止使用的,PHP中有一些函数的风险性还是相当大的,可以 ...

  7. 【02】Python 字符串、列表、元组、字典

    1 列表 list就是一种采用分离式技术实现的动态顺序表(tuple也一样): 在建立空表(或者很小的表)时,系统分配一块能容纳8个元素的存储区: 在执行插入操作(insert或append)时,如果 ...

  8. js数字每3位加一个逗号

    if(typeof val ==="number"){ var str = val.toString(); ? /(\d)(?=(\d{})+\.)/g : /(\d)(?=(?: ...

  9. php array_pop()函数 语法

    php array_pop()函数 语法 作用:删除数组中的最后一个元素.博智达 语法:array_pop(array) 参数: 参数 描述 array 必需.规定数组.     说明:返回数组的最后 ...

  10. Activiti组任务(十)

    1 Candidate-users 候选人 1.1需求 在流程定义中在任务结点的 assignee 固定设置任务负责人,在流程定义时将参与者固定设置在.bpmn 文件中,如果临时任务负责人变更则需要修 ...