详解vue组件通信的三种方式
1. 第一种方式就是官方推荐的
有时候两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线。
本质是通过派发事件然后监听事件从而更改值，(父子组件通信也可用这个方式，但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转，这种方式我这里就不做演示的了，因为我的题目是非父子通信)
空的Vue实例 bus
import Vue from 'vue' const bus = new Vue() export default bus
组件add
<!--html结构-->
<template>
<div>
<p>我是add组件的num:{{num}} </p>
<button @click='add'>增加</button>
</div>
</template>
// js
<script>
import bus from '../bus.js'
export default {
data() {
return {
num: ''
}
},
methods: {
add() {
if (this.num) {
this.num++
bus.$emit('num-change', this.num)
} else {
this.num = 1
bus.$emit('num-change', this.num)
}
}
}
}
</script>
组件sub
<!--html结构-->
<template>
<div>
<p>我是sub组件的num:{{num}}</p>
</div>
</template>
// js
<script>
import bus from '../bus.js'
export default {
data() {
return {
num: ''
}
},
created() {
bus.$on('num-change', num => {
this.num = num
})
}
}
</script>
2.通过vuex来进行状态管理
vuex我这里就不详细说了，网上教程太多。
3.取巧利用js中的对象的特性（指针）
Object在内存中存储只是保留指针，所以父组件通过props来给兄弟组件传递同一个对象，兄弟组件接收的对象跟父组件的对象都是指向同一个内存地址，故不管在哪里修改都能保持一致。
上代码，父组件把同一个对象传递给add组件和sub组件，那么add组件和sub组件接收到的对象也是指向父组件app的对象都是指向同一个内存地址。add组件对传入的对象进行+1的操作，sub组件进行-1的操作。
父组件 app.vue
<!--html结构-->
<template>
<div id="app">
<h1>我是app父组件的newNum:{{share.newNum}}</h1>
<hr>
<!--将同一个对象同时传给两个子组件-->
<addnum :share1='share'></addnum>
<hr>
<subnum :share2='share'></subnum>
</div>
</template>
// js
import addnum from './components/add'
import subnum from './components/sub'
export default {
data() {
return {
share: {
newNum: 1
}
}
},
components: {
addnum, subnum
}
}
子组件add.vue
<!--html结构-->
<template>
<div>
<p>我是add组件的newNum:{{share1.newNum}} </p>
<button @click='add'>增加</button>
</div>
</template>
//js
<script>
export default {
methods: {
add() {
this.share1.newNum++
}
},
props: {
share1: {
type: Object,
}
}
}
</script>
子组件sub.vue
<!--html结构-->
<template>
<div>
<p>我是sub组件的newNum:{{share2.newNum}}</p>
<button @click='numSub'>减少</button>
</div>
</template>
// js
<script>
export default {
methods: {
numSub() {
this.share2.newNum--
}
},
props: {
share2: {
type: Object,
}
}
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解vue2.0组件通信各种情况总结与实例分析
Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html <div id="app1"> <i>注意命名规定:仅在html内使用my-message</i> <child my-message="组件内部数据传递"></child> </div> //js
-
vue组件间通信解析
组件间通信(父子,兄弟) 相关链接\组件通信:点击查看 学习链接:Vue.js--60分钟快速入门点击查看 分分钟玩转Vue.js组件点击查看 父组件传子组件 父传子方法(一) 属性传递 props //子组件 <template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template> <script> export defa
-
Vue2.x中的父子组件相互通信的实现方法
业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template> <div> <p>群消息girl:</p> <div> {{ somebody }} 说: 我 {{ age }} 了. </div> <hr> <v-girl-group :girls="aGirls"
-
Vue 父子组件、组件间通信
本人对Vue组件间通信不懂,搜索了很多关于Vue 父子组件间通信介绍,下面我来记录一下,有需要了解Vue 父子组件.组件间通信的朋友可参考.希望此文章对各位有所帮助. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <meta name="viewport"
-
详解Vue组件之间的数据通信实例
最近在用vue做项目,学习了不少东西,但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得,因为是新手,所以可能会有错误的地方,欢迎指出和交流呀~~~ 关于父子组件以及非父子组件之间的数据通信 1 父子组件之间数据通信 一般父组件向子组件传递数据用prop进行传递,注意,子组件不能对prop中的数据进行更改,vue中规定是防止子组件对父组件中的数据进行窜改.而子组件向父组件进行数据传递则可以通过事件触发父组件的事件来实现数据的传递.(是不是有点懵逼了,看个例子吧 ) (这里我就直接
-
深入探讨Vue.js组件和组件通信
基本是按照官网的 Guide 全部梳理了一遍:http://vuejs.org/guide/index.html 这里我们以一个 Todo List 应用为例来把相关的只是都串起来,这篇里面的全部代码都在github上 https://github.com/lihongxun945/vue-todolist Vue 实例 一个 Vue 应用是由一个 root vue instance 引导启动的,而 Vue instance 是这么创建的: var vm = new Vue({ // opti
-
vue2.0父子组件及非父子组件之间的通信方法
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr
-
Vuejs第十篇之vuejs父子组件通信
本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件.父组件.根组件: this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例 示例代码: <div id="a
-
Vue组件通信实践记录（推荐）
组件通信 几乎所有的mvvm框架中都要涉及组件通信的功能(吐槽一下knockout,毕竟是鼻祖就先不说它了).而且目前的前端形式来看,组件化是一个项目的基础.所以选好一个合适的框架后,随着组件的不断增加,业务的复杂度提升,组件之间的通信变得尤为重要. 实践方法 由于更换新的框架,我们的项目由Avalon更新成Vue.但是为了兼容以前的业务代码,不能直接使用vue的标准实践方式,我还是拿过来后封装了一个vue的class,具体业务里面不影响使用,封装的过程之后写出来再聊吧,下面来总结一下最近用到的
-
详解vue组件通信的三种方式
1. 第一种方式就是官方推荐的 官方推荐方式 有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线. 本质是通过派发事件然后监听事件从而更改值,(父子组件通信也可用这个方式,但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转,这种方式我这里就不做演示的了,因为我的题目是非父子通信) 空的Vue实例 bus import Vue from 'vue' const bus = new Vue() export default bu
-
详解vue组件之间相互传值的方式
概述 我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收
-
详解vue 路由跳转四种方式 (带参数)
1. router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para
-
详解Springboot下载Excel的三种方式
汇总一下浏览器下载和代码本地下载实现的3种方式. (其实一般都是在代码生成excel,然后上传到oss,然后传链接给前台,但是我好像没有实现过直接点击就能在浏览器下载的功能,所以这次一起汇总一下3种实现方式.)
-
详解SpringBoot禁用Swagger的三种方式
目录 摘要 方法 禁用方法1: 禁用方法2: 禁用方法3: 摘要 在生产环境下,我们需要关闭swagger配置,避免暴露接口的这种危险行为. 方法 禁用方法1: 使用注解 @Value() 推荐使用 package com.dc.config; import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty; import org.springframework.context.annotation.Be
-
详解Spring获取配置的三种方式
目录 前言 Spring中获取配置的三种方式 通过@Value动态获取单个配置 通过@ConfigurationProperties+前缀方式批量获取 通过Environment动态获取单个配置 总结 前言 最近在写框架时遇到需要根据特定配置(可能不存在)加载 bean 的需求,所以就学习了下 Spring 中如何获取配置的几种方式. Spring 中获取配置的三种方式 通过 @Value 方式动态获取单个配置 通过 @ConfigurationProperties + 前缀方式批量获取配置 通
-
详解mysql数据去重的三种方式
目录 一.背景 二.数据去重三种方法使用 1.通过MySQL DISTINCT:去重(过滤重复数据) 2.group by 3.row_number窗口函数 三.总结 一.背景 最近在和系统模块做数据联调,其中有一个需求是将两个角色下的相关数据对比后将最新的数据返回出去,于是就想到了去重,再次做一个总结. 二.数据去重三种方法使用 1.通过MySQL DISTINCT:去重(过滤重复数据) 1.1.在使用 mysql SELECT 语句查询数据的时候返回的是所有匹配的行. SELECT
-
详解Spring依赖注入的三种方式以及优缺点
目录 0.概述 1.属性注入 1.1 优点分析 1.2 缺点分析 2.Setter 注入 优缺点分析 3.构造方法注入 优点分析 总结 0.概述 在 Spring 中实现依赖注入的常见方式有以下 3 种: 属性注入(Field Injection): Setter 注入(Setter Injection): 构造方法注入(Constructor Injection). 它们的具体使用和优缺点分析如下. 1.属性注入 属性注入是我们最熟悉,也是日常开发中使用最多的一种注入方式,它的实现代码如下:
-
详解Java实现多线程的三种方式
本文实例为大家分享了Java实现多线程的三种方式,供大家参考,具体内容如下 import java.util.concurrent.Callable; import java.util.concurrent.FutureTask; public class Main { public static void main(String[] args) { //方法一:继承Thread int i = 0; // for(; i < 100; i++){ // System.out.println(T
-
详解iOS设置字体的三种方式
有时候项目需要显示一些非系统的字体达到一些UI的效果,目前设置字体有三种方式,默认方式.bundle方式,coreText方式. 1 默认方式 这种方式就是正常的字体设置方式 label.font = [UIFont fontwithname:@"Blazed" size:42]; 至于第一个参数的名字,可以通过以下方法输出所有字体名字列表 [UIFont familyNames] 只要名字列表中存在的,都可以用这种方式关联到对应的字体上. 2 绑定自定义的字体包 其实第二种方式和第一