vue组件通信的多种方法详解

目录
  • 1. 父传子
  • 2. 子传父
  • 3. 非父子组件传值
  • 4. vuex
  • 5. refs
  • 6. $children
  • 7. $parent
  • 8. provide & inject
  • 9. $attrs
  • 10. $listeners
  • 总结

说起组件通信，可能大家耳熟能详的有以下5种：

1. 父传子

父组件通过自定义属性给子组件传值，子组件用props接收

2. 子传父

父组件在子组件标签上自定义事件，子组件通过$emit来触发自定义事件，并且可以传递参数

3. 非父子组件传值

eventBus事件总线：

可通过eventBus进行信息的发布与订阅（创造一个都能访问到的事件总线）

4. vuex

vuex是专为vue.js应用程序开发的状态管理模式，它采用集中式存储管理程序的所有组件的状态，解决多组件通信。不过多用于中大型项目，小型项目用它会显得臃肿。

5. refs

通过添加ref和·$refs·配合，也可以很方便的获取子组件，访问调用子组件的属性和方法
关于refs，我还另外单独写过一篇详细用法的，refs的用法

除开以上5种，还有5种不那么常见的组件通信方法：

6. $children

父组件中·$children·返回的是一个组件集合，如果清楚知道子组件的顺序，也可以使用下标操作

7. $parent

子组件中this.$parent指向父组件，子组件无法直接修改父组件中的数据，可以通过this.$parent让父组件自己去改

例如：

this.$parent.xxx=200

this.$parent.fn()

8. provide & inject

成对出现：provide和inject是成对出现的

作用：用于父组件向子孙组件传递数据

使用方法：

  • provide在父组件中，返回要传给下级的数据
  • inject在需要使用这个数据的子孙组件中注入数据。（不论组件层次有多深）

9. $attrs

用于父组件给孙组件传递数据

10. $listeners

用于孙组件给父组件传递数据

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Vue之组件的自定义事件详解

    Vue之组件的自定义事件详解

    目录 总结 <template> <div > <h2>{{msg}}</h2> <!-- 通过父组件给子组件传递函数类型的数据props实现:子给父传递数据 --> <School :getName="getName"/> <Student :getStudentname="getStudentname"/> <!-- 通过父组件给子组件绑定一个自定义事件:实现子给父传递数据

  • vue components 动态组件详解

    目录 总结 总结 数组发生变化时,动态加载相应数据 场景:点击不同组件名称,界面显示相应组件 步骤一:导入所需组件 步骤二:点击 tab 选项卡,将对应组件名添加进数组 步骤三:使用动态组件,:is 属性绑定组件名 <div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div

  • vue中router-view组件的使用详解

    vue中router-view组件的使用详解

    在开发vue项目中经常需要实现一个页面里面可以切换着展现不同的组件页面 例如:下图中通过点击侧边栏不同的组件路由到不同的组件页,而侧边栏和顶部部分是不变的,切换的只是组件页面. 这个时候我们就需要用到 路由中的 router-view组件(也叫路由占位符) 了 首先我们来到 需要切换不同组件页的页面 ,在自己需要的位置 添加 router-view组件 Home.vue <template> <!--头部区域--> <el-header> <div> <

  • Vue之组件详解

    Vue之组件详解

    <body> <div id="root"> <h2>{{name}}</h2> <hr> <school></school> <hr> <student></student> <hr> <!-- <h2>学生姓名:{{name}}</h2> <h2>学生年龄:{{age}}</h2> --> &

  • vue3 父子组件传值详解

    现在距离vue3的诞生已经过了很长时间了,笔者也是近期才开始学习vue3.对比vue2来看,vue3在写法发生了不小的变化,最典型的例子就是vue3通过ref,或者reactive实现数据的响应式.因为ref和reactive的出现,使得vue3中父子组件的传值方式也发生了变化 咱们先看下vue2中的写法 父组件: <!-- 父组件 --> <template> <div> <children :title="title" @getChildr

  • vue图片拖拉转放大缩小组件使用详解

    vue图片拖拉转放大缩小组件使用详解

    vue图片拖拉转放大缩小组件的具体使用方法,供大家参考,具体内容如下 <doc> 图片组件 - 用户放大缩小以及拖拽 </doc> <template> <div style="width: 100%;position: relative;overflow: hidden;text-align: center;border: 1px solid #f1f2f3;"> <el-button size='mini' @click=&qu

  • vue组件通信的多种方法详解

    vue组件通信的多种方法详解

    目录 1. 父传子 2. 子传父 3. 非父子组件传值 4. vuex 5. refs 6. $children 7. $parent 8. provide & inject 9. $attrs 10. $listeners 总结 说起组件通信,可能大家耳熟能详的有以下5种: 1. 父传子 父组件通过自定义属性给子组件传值,子组件用props接收 2. 子传父 父组件在子组件标签上自定义事件,子组件通过$emit来触发自定义事件,并且可以传递参数 3. 非父子组件传值 eventBus事件总线:

  • vue 父组件通过$refs获取子组件的值和方法详解

    前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调

  • Vue父子组件属性传递实现方法详解

    目录 前言 组件之间属性的传递 父组件传递属性给子组件 子组件传递属性给父组件 前言 这节我们主要从案例出发,用Vue3的写法写父子组件之间的属性传递. 组件之间属性的传递 我们定义一个Rate组件,具有以下功能: 接收来自外部组件传入的参数,starCount代表星星个数.color代表星星颜色. 需要根据传入星星的个数,展示对应数量的星星. 父组件传递属性给子组件 那么在编写组件的时候,我们需要注意什么? 我们可以使用defineProps来规范传递数据的格式.可以结合withDefault

  • vue组件三大核心概念图文详解

    前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 github博客 ,纸上得来终觉浅,大家动手多敲敲代码! 一.属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型.默认值或自定义校验属性的值,这点在组件开发中很重要,

  • Vue 中使用 typescript的方法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescript npm install -g ty

  • Vue组件之间四种通信方式详解

    Vue组件之间四种通信方式详解

    目录 前言 父子组件通信​ 父组件与子孙组件的通信​ 父组件获取子组件数据​ 无需考虑组件关系的通信​ 前言 vue 框架提供了前端开发组件的思想,可以通过组件来组合成一个完整的页面,都是随着组件数量原来越多,组件之间难免需要相互通信,那么如何实现组件之间的通信呢?下面介绍 vue 组件通信的几种方法 父子组件通信​ 父组件传递 props 给子组件(数据以及改变数据的方法),子组件通过 $emit 来更新父组件的状态 父组件定义,声明状态 { name: 'baidu.com' } 以及可以改

  • vue组件间的参数传递实例详解

    场景分析 在前端开发中,我们常常会运用到"组件库".在main入口中引入组件库,就可以很轻松的在页面中引入,并做一些基本的配置,如样式,颜色等.只需要在引入的组件中写入特定的属性,就能够定义. 举例说明 例如:element-ui组件库中使用switch开关,有个属性active-color是设置"打开时"的背景色.change事件是触发状态的事件. <el-switch v-model="value" :active-color=&quo

  • vue中使用vue-pdf的方法详解

    需求:简单说~~有两个pdf文件需在h5上展示,通过点击按钮切换不同文件的显示 注: 1.vue-pdf默认展示首页,我这里的需求是通过滑动展示所有页面,这里使用的v-for遍历.有多少页就加载了多少个pdf组件. 2.pdf文件存在跨域问题,这个需要后端同学支持. 3.demo上的pdf文件只有一页,测试多页展示,自己改用多页pdf文件即可 <template> <div class="pdf_wrap"> <div class="pdf_li

  • Vue.nextTick纯干货使用方法详解

    Vue.nextTick纯干货使用方法详解

    目录 一.nextTick小测试 二.nextTick源码实现 1. 全局变量 2. flushCallbacks 3. nextTick的异步实现 4. nextTick方法实现 三.Vue组件的异步更新 1. queueWatcher做了什么? 2. flushSchedulerQueue做了什么? 四.回归题目本身 用过Vue的朋友多多少少都知道$nextTick- 在正式讲解nextTick之前,我想你应该清楚知道 Vue 在更新 DOM 时是异步执行的,因为接下来讲解过程会结合组件更新

  • 在Vue2中注册全局组件的两种方法详解

    第一种:在main.js中直接注册 //引入 import FixedTop from '@/components/FixedTop //注册为全局组件 Vue.componet('FixedTop',FixedTop) //页面直接使用 <FixedTop /> 缺点:如果我们需要注册的全局组件非常多,那么需要一个一个引入,然后分别调用Vue.componet方法,main.js文件会变得很大很臃肿,不好维护,所以当需要注册的全局组件非常多的时候可以采用插件的形式注册 第二种:使用插件的形式

随机推荐