首页 > 其他分享 >vue 组件之间的数据传递

vue 组件之间的数据传递

时间:2023-10-19 16:25:43浏览次数:36  
标签:vue 在子 通过 传递 事件 组件 inject

一、组件之间的关系

  父子关系、兄弟关系、跨级关系

二、父子之间数据传递

1、父组件向子组件传递【使用 props】  

  • 第一步:在父组件中使用子组件时,给子组件绑定属性
  • 第二步:在子组件中使用props接收绑定的属性值

2、子组件向父组件传递【使用 $emit】

  • 第一步:在子组件中通过$emit触发指定的事件,同时传值
  • 第二步:在父组件中给子组件v-on监听事件,同时接收子组件传来的值
 3、通过 ref 属性给子组件设置一个名字.
  • 父组件通过组件名来获得子组件
  • 子组件通过parent 获得父组件
  • $refs绑定触发子组件的方法或者获得数据

父组件

子组件

4、使用 provide / inject

  • 在父组件中通过 provide提供变量
  • 在子组件中通过 inject 来将变量注入到组件 中
  • 只要调用了 inject 那么就可以注入 provide中的数据

 

三、兄弟之间传递数据

1、eventBus事件总线(on)

  • 本质:是通过创建一个空的 Vue 实例来作为消息传递的对象
  • 通信的组件引入这个实例,通信的组件通过在这个实例上监听和触发事件,来实现消息的传递
  • 事件总线就相当于一个桥梁,不用组件通过它来通信 使用步骤如下:
    • 创建事件中心管理组件之间的通信
    • 发送事件
    • 接收事件

2、通过 refs 来获取到兄弟组件,也可以进行通信

四、跨级之间传递数据

1、使用 eventBus ,其实就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件

 【全局事件总线:可以实现任意组件间的数据传递】

 

 

标签:vue,在子,通过,传递,事件,组件,inject
From: https://www.cnblogs.com/hellofangfang/p/17774981.html

相关文章

  • drf 1.版本组件
    创建drf流程配置文件pipinstalldjango==3.2django-adminstartprojectobj.创建项目加点会加到根目录pythonmanege.pystartappapp01pipinstalldjangorestframework按照drf组件纯净版本django设置settingsdrf配置REST_FRAMEWORK={}查找这个REST_FRAMEWORK......
  • [Vue]el和data的两种写法
    1.el有2种写法(1).newVue时候配置el属性。(2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值。//-------------el的两种写法-------------constvm=newVue({el:'#root',//第一种写法data:{name:'模板'}})//---------------......
  • vue-print打印(含多页打印带表头)
    打印功能开发:1)使用vuePlugsPrint.js2)main.js加入:importvuePlugsPrintfrom'@/utils/vuePlugsPrint'               Vue.use(vuePlugsPrint);3)创建打印模板页面:templatePrint.vue4)使用页面引入:<el-col:span="1.5">    ......
  • React学习笔记08- 组件的样式
    1.使用行内样式想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现://注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号<pstyle={{color:'red',fontSize:'14px'}}>Helloworld</p>行内样式需要写入一个样式对象,而这个样式对象的位置可......
  • vue2和vue3导出页面为PDF格式:jspdf和html2canvas
    一、vue2导出PDF使用步骤1、安装html2canvas,将页面html转换成图片npminstall--savehtml2canvas卸载:npmuninstallhtml2canvas指定版本安装:[email protected]、安装jspdf,将图片生成pdfnpminstalljspdf--save3、定义全局函数在指......
  • React学习笔记06-函数式组件
    函数式组件即在React中通过函数的方式来声明一个组件importReactfrom"react"functionApp(){return(<div>函数式组件<div>hhh</div></div>)}/*16.8之前//无状态16.8之后reacthooks*/exportdef......
  • React学习笔记07-组件嵌套
    一个项目肯定是由多个组件构成的,组件之前必然会存在相互嵌套的关系在react中如果想要将一个组件嵌入到另外一个组件中只需要在父组件的render函数的返回值中放入子组件即可请看下面代码importReact,{Component}from"react"classNavbarextendsComponent{rende......
  • import { useRouter } from 'next/router'; 在非hooks 文件或组件中使用
    将 import{useRouter}from'next/router';改为 importRouterfrom"next/router";使用: Router.push('/');原来使用 import{useRouter}from'next/router';会导致报错如下  ......
  • React学习笔记05-类组件
    ES6的加入让JavaScript直接支持使用class来定义一个类,react创建组件的方式就是使用的类的继承,ES6class是目前官方推荐的使用方式,它使用了ES6标准语法来构建,看以下代码importReactfrom'react'importReactDOMfrom'react-dom'classAppextendsReact.Component{rend......
  • 【Vue3响应式入门#01】Reactivity
    专栏分享:vue2源码专栏,vue3源码专栏,vuerouter源码专栏,玩具项目专栏,硬核......