Vue事件总线
一 项目结构
二 main.js
import Vue from "vue";
import App from "./App.vue";
import Toolkit from "./plugins/toolkit"; Vue.config.productionTip = false; Vue.use(Toolkit); new Vue({
render: h => h(App)
}).$mount("#app");
三 toolkit.js
export default {
install(Vue, options) {
// 方法一:修改Vue构造函数的原型链
Vue.prototype.$eventBus = new Vue();
// 方法二:注册全局事件总线
// window.eventBus = new Vue();
}
};
四 App.vue
<template>
<div id="app">
<fish/>
<cat/>
</div>
</template> <script>
import Vue from "vue";
import Fish from "./components/Fish";
import Cat from "./components/Cat";
export default {
name: "app",
components: { Fish, Cat }
};
</script> <style>
</style>
五 Fish.vue
<template>
<div>
<h3>鱼Vue事件总线的更多相关文章
- Vue事件总线(eventBus)$on()会多次触发解决办法
项目中使用了事件总线eventBus来进行两个组件间的通信, 使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下: import Vue from 'vue'export def ...
- vue 事件总线(bus)
1.全局引入bus Vue.prototype.$bus = new.Vue() 2.组件间传值使用(在发送事件时接收组件会实时接收到, 可以用做兄弟组件间相互传值, 但页面跳转组件间有问题 通过$e ...
- vue中央事件总线eventBus的简单理解和使用
公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信.它是实现非父子组件通信的一种解决方案. 用法如下: 第一步:项目中创建一个js文件(我通 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue笔记 - 组件间通信 之 中央事件总线bus
中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容: var bus = new Vue(); 人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站 ...
- Vue开发中的中央事件总线
在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的 ...
- Vue.js 2.x中事件总线(EvevntBus)及element-ui中全屏loading的使用
事件总线(Event Bus)可以在vue项目的index.js文件中创建,也可以在一个独立的.vue文件中创建.使用时,在各个子组件中引入该组件即可. 项目中的全屏loading较多时,可以在根组件 ...
- 记一笔vue中的中央事件总线的问题,以及解决方案
代码结构:首先HeaderNav组件是被单独拎出来的,router-view中就对应了内容组件,由于有时候i有的界面的header内容是不一样的,因此要用到兄弟组件的相互通信,这个时候我首先选择了bu ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
随机推荐
- 【题解】1-2-K Game
题目大意 现有\(n\)个东西,每次可以取\(1\)个,\(2\)个或\(k\)个.Alice和Bob轮流取,且Alice先取.问谁是最后一个取的.(\(0 \leq n \leq 10^9\), ...
- BZOJ 1908. Pku2054 UVA1205 Color a Tree
传送门 看一眼感觉 $dp$,发现状态没法维护 考虑贪心,然后就想了两个错的贪心... 正解好神啊 首先如果权值最大的点能够一步染色那么肯定要染它 意思就是,一旦父节点被染色那么它就要接着被染色 那么 ...
- 搜索(DFS)---能到达的太平洋和大西洋的区域
能到达的太平洋和大西洋的区域 417. Pacific Atlantic Water Flow (Medium) Given the following 5x5 matrix: Pacific ~ ~ ...
- .NET基础篇——利用泛型与反射更新实体(ADO.NET Entity Framework)(转)
自从ADO.NET Entity Framework面世以来,受到大家的热捧,它封装了大量代码生成的工具,用户只需要建立好实体之间的关系,系统就是会为用户自动成功了Add.Delete.CreateO ...
- tcp 建立连接三次握手
众所周知,tcp是安全的,可靠的,但是为什么呢.要理解这一点,首先先了解tcp的建立连接的原理. 三次握手 第一次握手:由客户端向服务器发送请求,SYN 表示请求连接,seq是序列号(随机选取). 第 ...
- iOS开发-retain/assign/strong/weak/copy/mutablecopy/autorelease区别
依旧本着尊重原创和劳动者的原则,将地址先贴在前面: http://www.cnblogs.com/nonato/archive/2013/11/28/3447162.html,作者Nonato 以下内 ...
- PTA 错题记录
程设期中考, 记录一下曾经做错的选择填空. 1. 2. 3. 4. 5. 6.
- [Luogu2600]合并神犇(dp,贪心)
[Luogu2600]合并神犇 题目背景 loidc来到了NOI的赛场上,他在那里看到了好多神犇. 题目描述 神犇们现在正排成一排在刷题.每个神犇都有一个能力值p[i].loidc认为坐在附近的金牌爷 ...
- solr的一些查询语法
以下内容来自solr中国 1.1. 首先假设我的数据里fields有:name, tel, address 预设的搜寻是name这个字段, 如果要搜寻的数据刚好就是 name 这个字段,就不需要指定搜 ...
- Multisim
万用表 测量电压.电流.电阻 直流.交流 函数发生器XFG 正极.负极.公共端 可以产生正弦波.三角波和矩形波,可以设置信号参数:频率.占空比.幅度和偏移量等 示波器XSC 双通道示波器 4个连接点, ...