<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>非父子组件之间的传值</title>        

    </head>

    <body>

        <div id="app">

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

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

        </div>

        <!-- 开发环境版本，包含了用帮助的命令行警告 -->

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">

            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() {

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

                    }

                },

                mounted: function() {

                    var _this = this;

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

                        _this.selfContent = msg;

                    })

                }

            })

            var app = new Vue({

                el: '#app'

            })

        </script>

    </body>

</html>

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

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

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

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

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

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

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

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

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

  5. vue非父子关系之间通信传值

    第一种方法: 通过给vue实例添加自定义属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  6. vue非父子组件之间的通信

    https://www.cnblogs.com/chengduxiaoc/p/7099552.html   //vm.$emit( event, arg ) //触发当前实例上的事件 //vm.$on ...

  7. 「Vue」父子组件之间的传值及调用方法

    a.父组件向子组件传值data(){},props数据区别data中的数据可读可写,是自己的数据props是个数组,中的数据是父组件传递过来的,只读不能写<login :dmsg='msg'&g ...

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

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

  9. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...

随机推荐

  1. hadoop HA集群的安装

    1.hadoop集群规化 ip 主机名 安装软件 角色 运行进程 10.124.147.22 hadoop1 jdk.zookeeper.hadoop namenode/zookeeper/jobhi ...

  2. Linux进程基本原理

    主题进程介绍 一进程相关概念 内核的功用:进程管理.文件系统.网络功能.内存管理.驱动程序.安全功能等 在操作系统上会运行多个应用程序,应用程序分配多大的内存都由内核实现 程序文件 程序和进程的关系 ...

  3. centos系统下安装MySQL5.7.18

    1.首先安装依赖包 yum install -y gcc gcc-c++ ncurses-devel perl openssl-devel 最最重要的是,不要忘了安装openssl-devel 2.安 ...

  4. 生成函数小结——[ EGF ][ ln 的一个套路 ][ 概率生成函数 ]

    看了jcvb的WC2015交流课件.虽然没懂后面的复合逆部分,但生成函数感觉受益良多. 指数生成函数 集合中大小为 i 的对象的权值是 \( a_i \) ,该集合的生成函数是 \( \sum\lim ...

  5. ZROI week2

    \[ZROI week2\] 除草机 首先考虑最少的拐点肯定是那种螺旋形状的,然后手玩几个数据发现和列数(行数)有关,且每增加1就是上一个状态加2,直接\(O(1)\)公式即可 吐槽:为啥\(n,m\ ...

  6. quartz的初步总结及配置优化

    1.scheduler 1. Scheduler就是Quartz的大脑,所有任务都是由它来设施.Scheduler包含一个两个重要组件: JobStore和ThreadPool.JobStore是会来 ...

  7. 2019杭电多校第四场hdu6623 Minimal Power of Prime

    Minimal Power of Prime 题目传送门 解题思路 先打\(N^\frac{1}{5}\)内的素数表,对于每一个n,先分解\(N^\frac{1}{5}\)范围内的素数,分解完后n变为 ...

  8. Java类成员访问级别

    类可以是public或default(或包级别).在本教程中主要介绍 public,private,protected 这几个访问级别修辞符的使用.类成员的访问级别确定程序的哪个区域可以访问它. 以下 ...

  9. java jpa 实体关联

    关联关系: 1. One to One 2. One to Many 3. Many to One 4 Many to Many 映射: 延迟加载 @Basic(fetch = FetchType.L ...

  10. 在mac版virtual box中安装ubuntu虚拟机的NAT/Host-Only网络配置踩坑记录

    之前用惯了vmware和parallels desktop,网络配置十分智能,基本不用自己配置.由于版权原因,工作电脑上换了免费的virtual box用,四五年都完全在虚拟机里干活的本菜鸡居然在虚拟 ...