<!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. 2019HDU多校训练第二场 Longest Subarray

    题意:给你一个串,问满足以下条件的子串中最长的是多长:对于每个数字,要么在这个子串没出现过,要么出现次数超过k次. 思路:对于这类问题,常常转化为数据结构的询问问题.我们考虑枚举右端点,对于当前右端点 ...

  2. Java高级应用(一)

    下面来介绍一下Java的高级应用有哪些. Java高级应用 第一讲 类加载 (一).类加载 类加载器是一个特殊的类,负责在运行时寻找和加载类文件.Java允许使用不同的类加载器,甚至是自定义类加载器. ...

  3. jQuery判断checkbox是否选中的4种方法

    方法一: ).checked) { // do something } 方法二: if($('#checkbox-id').is(':checked')) { // do something } 方法 ...

  4. linux-usb软件系统架构

    1.软件系统架构 USB主控制器,芯片里面自带了得.为了让USB主控制器运行,所有有USB主控制器驱动. USB核心,内核提供好的USB协议之类的.USB设备驱动是针对插到接口的设备去工作的软件. 主 ...

  5. spring+websocket的整合实例--可使用

    spring+websocket的整合实例----借鉴如下链接--此贴用于笔记 https://blog.csdn.net/qq_35515521/article/details/78610847

  6. CF446D DZY Loves Games

    CF446D DZY Loves Games 高斯消元好题 如果暴力地,令f[i][k]表示到i,有k条命的概率,就没法做了. 转化题意 生命取决于经过陷阱的个数 把这个看成一步 所以考虑从一个陷阱到 ...

  7. 51NOD 1005

    1005 大数加法  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出2个大整数A,B,计算A+B的结果.   Input 第1行:大数A 第2行:大 ...

  8. php函数的使用技巧

    函数的使用技巧 1. do{...}while(false)的用法 作用:使用do{...}while(false)结构可以简化多级判断时代码的嵌套. 例子: 现在要实现一个功能,但需要A.B.C.D ...

  9. ceph-pg

    版本:mimic https://192.168.1.5:8006/pve-docs/chapter-pveceph.html#pve_ceph_osds As a rule of thumb, fo ...

  10. Tomcat 配置安装

    1 下载和安装Tomcat服务器 Tomcat官方站点:http://jakarta.apache.org 下载Tomcat安装程序包:http://tomcat.apache.org/ 启动和测试T ...