Vue组件通信深入分析

目录
  • 一、组件间的通信方式分类
  • 二、props传递数据
  • 三、$emit 触发自定义事件
  • 四、ref标记
  • 五、EventBus事件总线
  • 六、$parent 或 $root
  • 七、vuex
  • 八、总结

一、组件间的通信方式分类

  • 父子组件之间的通信;
  • 兄弟组件之间的通信;
  • 祖孙与后代组件之间的通信;
  • 非关系组件之间的通信。

二、props传递数据

适用场景:父组件传递数据给子组件;

  • 子组件设置props属性,定义接收父组件传递过来的参数;
  • 父组件在使用子组件标签中通过字面量来传递值

Person.vue

<template>
  <div>
    Person
    <Student1 name="jack" age="18"></Student1>
    </div>
</template>
<script>
import Student1 from './Student1'
export default {
    name: 'Person',
    components: {
        Student1,
    },
</script>

Student1.vue

<template>
  <div>
    Student1
    {{name}},{{age}}
  </div>
</template>
<script>
export default {
    name: 'Student1',
    props: {
        name: String,
        age:Number,
    }
}
</script>

效果

三、$emit 触发自定义事件

  • 适用场景:子组件传递数据给父组件
  • 子组件通过 $emit触发自定义事件,$emit第二个参数为传递的数值;
  • 父组件绑定监听器获取到子组件传递过来的参数。

Student1.vue

<template>
  <div>
    Student1
    <button @click="giveData()">点我传递数据</button>
  </div>
</template>
<script>
export default {
    name: 'Student1',
    methods: {
        giveData() {
            this.$emit('add', '12345');
        }
    },
}
</script>

Person.vue

<template>
  <div>
    Person
    <Student1 @add="cartAdd($event)"></Student1>
    </div>
</template>
<script>
import Student1 from './Student1'
export default {
    name: 'Person',
    components: {
        Student1,
    },
    methods: {
        cartAdd(event) {
            console.log(event);
        }
    },
}
</script>

四、ref标记

  • 使用场景:子组件传递数据给父组件
  • 父组件在使用子组件的时候设置ref
  • 父组件通过设置子组件ref来获取数据
<template>
  <div>
    Person
    <Student2 ref="foo"></Student2>
    <button @click="getRef()">点击获取ref数据</button>
  </div>
</template>
<script>
import Student2 from "./Student2";
export default {
  name: "Person",
  components: {
    Student2,
  },
  methods: {
    getRef() {
      console.log(this.$refs.foo);
    },
  },
};
</script>

效果

五、EventBus事件总线

  • 使用场景:任意组件传值
  • 创建一个中央事件总线EventBus
  • 兄弟组件通过$emit触发自定义事件,$emit第二个参数为传递的数值
  • 另一个兄弟组件通过$on监听自定义事件

main.js

beforeCreate() {
  Vue.prototype.$bus = this
}

Student2.vue

<template>
  <div>
    Student2
    <button @click="getBus()">点我获取全局事件总线数据</button>
  </div>
</template>
<script>
export default {
  name: 'Student2',
  data() {
    return {
      name: 'fanafan',
      age:'17'
    }
  },
  methods:{
    getBus(){
      this.$bus.$emit('bus',this.name)
    }
  }
}
</script>

Student1.vue

mounted() {
    this.$bus.$on('bus', (data) => {
        console.log(data)
    })
},

六、$parent 或 $root

使用方法类似全局事件总结

Vue.prototype.$parent = this
// 传数据
this.$parent.$emit('parent',this.age)
//接数据
this.$parent.$on('parent', (data) => {
    console.log(data);
})

七、vuex

  • 使用场景:复杂关系的组件数据传递
  • Vuex是一个用来存储共享变量的容器
  • state:用来存放共享遍历的地方;
  • getter:可以增加一个getter派生状态,用来获得共享变量的值;
  • mutations:用来存放修改state的方法;
  • actions也是用来存放修改state的方法,不过action是在mutations的基础上进行的。常用来做一些异步操作。

八、总结

  • 父——>子:props;
  • 子——>父:$emit,ref;
  • 兄弟——>兄弟,任意——>任意:$bus。
  • 复杂关系:vuex。

到此这篇关于Vue组件通信深入分析的文章就介绍到这了,更多相关Vue组件通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue中父子组件通信与事件触发的深入讲解

    目录 一.组件 子组件 父组件 二.父子组件通信 父组件给子组件通信 子组件向父组件通信 三.父子组件事件触发 父组件调用子组件中的事件方法 子组件调用父组件中的事件方法 四.总结 一.组件 子组件 <template> <div style="border:1px solid black;width:400px; height: 130px;"> <h3>我是子组件</h3> <button>子组件将值传递给父组件</

  • vue中组件之间相互通信传值的几种方法详解

    目录 vue中组件之间相互通讯传值的方式 1.子组件和父组件通讯,通过调用父组件给组件自定义属性值来实现 2.父组件主动获取子组件数据 3.使用provide/inject方法实现 4.使用事件总线 5.vuex\localStorage\sessionStorage 总结 vue中组件之间相互通讯传值的方式 我们在使用vue进行项目开发的时候为了更好地管理项目,我们会把每个功能封装成一个个的组件,在使用的时候直接引入并且调用组件来实现代码的复用. 我们在封装组件的时候经常会留有一些预留的接口,

  • 一起来学习Vue的组件间通信方式

    props 父组件可以通过props向下传递数据给子组件 静态的Props 通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的 动态Props 在模版中要动态的绑定父组件的数据到子模版的props,与绑定任何普通的HTML特性相类似,用v-bind,每当父组件的数据发生变化的时候,该变化会传导给子组件 props验证 可以为组件的props指定验证规则,如果传入的数据不符合规则,Vue会发出警告 props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA:

  • Vue组件之间的通信你知道多少

    目录 Vue组件间通信 1.父向子传递数据 1.props的大小写 2.props的两种写法 3.传递动态props 2.子向父传递数据 3.兄弟(任意)组件间的传值 3.1全局事件总线 3.2消息订阅与发布 总结 Vue组件间通信 vue组件间通信分为以下几种: 父向子传递数据,用自定义属性 子向父传递数据,用自定义事件 兄弟(任意)组件间传递数据,用全局事件总线或者消息订阅与发布 背吧,面试题要是说让你简述一下,就上面这段话拿过来回答呗.下面就介绍一下这几种通信方式的简单用法 1.父向子传递

  • Vue非父子组件之间的通信方式详解

    目录 非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线 总结 非父子组件的通信 此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信. 这里我们主要讲两种方式: Provide/Inject: 全局事件总线: 1.Provide和Inject 1.1基本使用 Provide/Inject用于非父子组件之间共享数据: 比如有一些深度嵌套的组件

  • 一文搞懂Vue2中的组件通信

    目录 vue 组件通信方式 1.props传参 2.emit,on通信 3.$ref,$children实例通信 4.$parent通信 5.插槽通信(一般不用) 6.$attr,$listener深层双向通信 7.provide,inject依赖注入深层次单向通信 8.$bus事件总线全局通信 vue 组件通信方式 1.父组件将自己的状态分享给子组件使用: 方法:父组件通过子标签传递数据,子组件通过 props 接收 2.子组件改变父组件的状态; 方法:父组件在子标签上通过@abc 提供一个改

  • Vue组件通信方式(父传子、子传父、兄弟通信)

    目录 父组件传到子组件 子组件向父组件传值 非父子传参 (事件总线) vue 跨页面双向通信 同源通信 非同源通讯 父组件传到子组件 父组件是通过props属性给子组件通信的 数据是单向流动 父—>子 (子组件中修改props数据,是无效的,会有一个红色警告) 1. 父组件parent.vue代码如下:  <template>    <div class="parent">      <h2>{{ msg }}</h2>      

  • vue 组件通信的多种方式

    目录 前言 一.vuex 二.eventBus 三.props/emit 四.$parent/$children 五.$attrs/$listeners 六.provide/inject 前言 在vue中,​ 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还有provide与inject.$attrs与$listeners等. 一.vuex 这个相信大家用的很多了,简

  • Vue组件之间的通信方式(推荐!)

    目录 一.组件间通信的概念 二.组件间通信解决了什么 二.组件间通信的分类 三.组件间通信的方案 props传递数据 $emit 触发自定义事件 ref EventBus parent或parent 或parent或 root attrs与attrs 与attrs与 listeners provide 与 inject vuex 小结 总结 一.组件间通信的概念 开始之前,我们把组件间通信这个词进行拆分 组件 通信 都知道组件是vue最强大的功能之一,vue中每一个.vue我们都可以视之为一个组

  • vue组件通信传值操作示例

    本文实例讲述了vue组件通信传值操作.分享给大家供大家参考,具体如下: 父子组件通信: 子组件 <template> <div> <h3 @click="alerrt"> 我是子组件一</h3> <span>{{parentMessage}}</span> </div> </template> <script> export default{ props: ['parentMes

  • 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组件通信之Bus的具体使用

    关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱.这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦.并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题. 官方推荐的状态管理方案是 Vuex.不过如果项目不是很大,状态管理也

  • Vue组件通信的四种方式汇总

    前言 众所周知vue是一种mvvm框架,它相对于jquery可能比较大的差异点之一就在于组件之间的通信了.本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白. 父子组件的通信 非父子组件的eventBus通信 利用本地缓存实现组件通信 Vuex通信 第一种通信方式:父子组件通信 父组件向子组件传递数据 父组件一共需要做4件事 1.import son from './son.js' 引入子组件 son 2.在componen

  • Vue组件通信的几种实现方法

    组件的通信 一般常见的组件之间的通信有以下几种情况,A和B,B和C,B和D之间都是父子关系,C和D之间是兄弟组件关系. 常用的通信手段有两种: 1.ref:给元素或组件注册引用信息 2.children:访问父级组件和子组件的实例. 这两种方式都是直接通过实例的方式获取的方式.示例如下: //comA组件A export default { data () { return { title: '测试通信' } }, methods: { sayHello () { window.alert('你

  • 详解利用eventemitter2实现Vue组件通信

    概述 当两个组件之间没有任何父子关系时,利用Vue标准的props传值和emit触发事件无法解决他们之间通信的问题.最近做的项目使用的是eventemitter2,来实现不相关组件之间的通信.这篇文章分享的是我对eventemitter2使用的总结和体会. eventemitter2的npm文档大家可以看eventemitter2介绍.它是node.js提供的事件接口.安装如下 npm install --save eventemitter2 模块的EventEmitter2属性是一个构造函数,

  • Vue组件通信入门之Provide和Inject机制

    前言 Vue中父组件到子组件的通信主要由子组件的props属性实现.但是在一些情况下,父组件无法直接向子组件的props传值.比如子组件通过父组件的slot进入父组件,父组件根本不知道子组件是谁,更不用说用子组件的props了.这时应该怎么办呢?Vue在2.2.0版本引入了provide与inject,正好适合处理这一情况. 什么是provide与inject 用文档的话说: provide/inject需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下

  • Vue组件通信中非父子组件传值知识点总结

    前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是我总结的父子传值相关的知识,可供参考:  https://www.jb51.net/article/121806.htm 然后大概回顾一下父子传值的过程: 根据上述信息可知,如果两个组件需要传递值那么需要这两个组件之间是父子关系才能传递数据. 那么如果有这样一个组件,既可以帮你传递数据,又可以帮你接

  • Vue组件通信$attrs、$listeners实现原理解析

    前言 vue通信手段有很多种,props/emit.vuex.event bus.provide/inject 等.还有一种通信方式,那就是$attrs和$listeners,之前早就听说这两个api,趁着有空来补补.这种方式挺优雅,使用起来也不赖.下面例子都会通过父.子.孙子,三者的关系来说明使用方式. $attrs 官方解释: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定

随机推荐

其他