<!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. java23种设计模式（二）-- 建造者模式和原型模式

    一.建造者模式 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创造不同的表示. 特点: (1).在某些属性没有赋值之前,复杂对象不能作为一个完整的产品使用.比如汽车包括方向盘.车门.发动机 ...

  2. 创建者模式-Builder

    创建者模式使用多个简单的对象一步一步构建成一个复杂的对象.它提供了一种创建对象的最佳方式.一个 Builder 类会一步一步构造最终的对象,该 Builder 类是独立于其他对象的. 一.类图 创建者 ...

  3. oracle 数据恢复

    闪回表删除之前 flashback table t1 to before drop; 如果彻底删除表此方法无效 若要彻底删除表,则使用语句:drop table <table_name> ...

  4. Python3.5-20190516-廖老师-自我笔记-匿名函数-装饰器

    当函数很简单的时候采用匿名函数很方便.

  5. Table 'jiang.hibernate_sequence' doesn't exist

    spring+struts2+hibernate 运行报错 Table 'jiang.hibernate_sequence' doesn't exist 解决方法 一. 在hibernate.cfg. ...

  6. MySQL UNSIGNED

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11484087.html UNSIGNED属性就是将数字类型无符号化,与C.C++这些程序语言中的uns ...

  7. Mysql 列变行其中一种做法。

    需求是: 上班打卡记录   和  下班打卡记录  是分别是两条数据,现在是要合并为一条数据,并且封装成一个实体. 有可能是 只有上班记录,,或者是只有下班的记录.如何关联全查,一边为null或者另一边 ...

  8. 工程师技术(四)：配置SMB文件夹共享、多用户Samba挂载、普通NFS共享的实现、安全NFS共享的实现

    一.配置SMB文件夹共享 目标: 本例要求在虚拟机 server0 上发布两个共享文件夹,具体要求如下: 1> 此服务器必须是 STAFF 工作组的一个成员   2> 发布目录 /comm ...

  9. Linux系统Centos查看IP地址，不显示IP地址或者显示127.0.0.1

    1.桌面界面 右上角有个电脑的图标,鼠标悬停会显示no network connect 点击一下图标,选择连接的网络则ok 2.命令行界面 在命令行界面输入 vi  /etc/sysconfig/ne ...

  10. （转）GitHub上想下载单个文件方法

    找到该文件,单机raw,如下图: 然后会在网页打开该文件,复制URL,下载即可(如果是不可预览文件,会自动下载). 转自: GitHub上想下载单个文件方法 - Smallcaff的博客 - CSDN ...