<!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. fiddler 4 抓取 https 设置

    Fiddler抓取https 设置 1.打开fiddler,点击工具栏中的Tools—>Options,点击Actions,选择最后一项,Reset All certificates,然后关闭, ...

  2. sql developer 中文乱码解决办法

    近日在fedora13中安装了oracle和sql developer,在英文环境下启动sql developer正常,可是切换到中文环境下就显示乱码.google了一下,确定是因为JDK不支持中文的 ...

  3. PHP随机生成不重复的8位卡号（数字）和卡密（字符串）

    一.生成不重复的随机数字,可自定义长度(最多支持10位数) /** * 生成不重复的随机数字(不能超过10位数,否则while循环陷入死循环) * @param int $start 需要生成的数字开 ...

  4. delphi三层DCOM架构

    DCOM架构: 服务端开发: 采用Delphi7+SQL2008 一.创建数据库和表 CREATE TABLE [dbo].[tb_Department]( [FKey] [uniqueidentif ...

  5. JavaSE---多线程---线程的创建、启动

    1.概述 1.1 Java中使用Thread类表示线程:   所有的线程对象必须是Thread类 或 其子类的实例:   每条线程的作用:完成一定的任务:   Java中使用run方法来封装线程执行体 ...

  6. 关键字group by 、 Having的 用法

    概述 GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类似Excel里面的透视表. GRO ...

  7. Linux eth0, eth1, ..., eth%d 的生成【转】

    转自:https://blog.csdn.net/xiruanliuwei/article/details/78765255 一直很好奇,Linux下的eth0, eth1,eth2等是如何生成的~ ...

  8. Vue学习笔记【30】——Vue路由（watch属性的使用）

    考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变:  <div id="app&quo ...

  9. <自动化测试>之<使用unittest Python测试框架进行参数化测试>

    最近在看视频时,虫师简单提到了简化自动化测试脚本用例中的代码量,而python中本身的参数化方法用来测试很糟糕,他在实际操作中使用了parameterized参数化... 有兴趣就查了下使用的方法,来 ...

  10. delphi弹出选择对话框选择目录SelectDirectory 函数

    SelectDirectory 函数通过显示一个对话框来让用户选择一个目录.注意:在使用前要在Uses 语句中添加包含FileCtrl 的说明.函数原型如下:function SelectDirect ...