<!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. Python向方法中传递自定义类型参数

    定义类型 class Fish: def __init__(self,x): self.num = xclass Turtle: def __init__(self,y): self.num = yc ...

  2. Tmux 中开启鼠标选择与复制

    在 tmux.conf 中加入下列设置(tmux 2.1 之前的版本): set -g mode-mouse on set -g mouse-resize-pane on set -g mouse-s ...

  3. OpenCV常用基本处理函数（4）简单变换，阈值等

    几何变换 缩放 img=cv2.imread('messi5.jpg') # 下面的 None 本应该是输出图像的尺寸,但是因为后边我们设置了缩放因子 # 因此这里为 None res=cv2.res ...

  4. vi快捷操作

    全部删除: 按esc键后,先按gg(到达顶部),然后dG 全部复制: 按esc键后,先按gg,然后ggyG 全选高亮显示: 按esc键后,先按gg,然后ggvG或者ggVG 单行复制: 按esc键后, ...

  5. jdbc blob插入及查询操作

    首先建一张表 create table picture( picId ) primary key not null, picName ) not null, picfile image null ) ...

  6. SAS 读取数据文件

    每次读取数据时需要告诉SAS3件事:1:数据存在哪里?2:数据的形式3:创建的数据集的类型(永久/临时) 1 读取SAS数据集 DATA temp; /*temp 为创建的数据集名称*/ INFILE ...

  7. Myeclipse下使用Maven搭建spring boot2.0项目

    现在需要搭建spring boot框架,并实现一个HelloWorld的项目,让程序真正运行起来. 一.在pom.xml中引入spring-boot-start-parent,spring官方的叫st ...

  8. C++ pair

    C++ pair Pair类型概述 pair是一种模板类型,其中包含两个数据值,两个数据的类型可以不同,基本的定义如下: pair<int, string> a; 表示a中有两个类型,第一 ...

  9. Linux基础-命令概述

    概述 很多人可能在电视或电影中看到过类似的场景,黑客面对一个黑色的屏幕,上面飘着密密麻麻的字符,梆梆一顿敲,就完成了窃取资料的任务,是不是很帅!我们作为一个开发者, 即使不为了成为上述的人, 也需要会 ...

  10. jmeter 后台运行 setsid bin/jmeter -n -t .jmx文件 -l .jtl文件

    备注: 另外,在Linux下我们有时候希望线程可以在后台运行,这样我们关闭当前连接后,线程依然可以运行,这里提供一个将 jmeter命令设置为后台线程的方法. 使用setsid命令:  setsid  ...