首页 > 其他分享 >组件之间通讯方式

组件之间通讯方式

时间:2022-11-05 14:11:06浏览次数:68  
标签:通讯 parent 方式 VueComponent 传递 组件 方法 children

props :父向子传递
$emit / v-on :子向父(通过派发)传递
v-model: 双向绑定
slot:插槽(子组件通过插槽的方法传给父组件)
provide/inject:依赖注入(可以指定传给后代的数据和方法)
root:访问根目录的属性和方法
$attrs/$listeners:深层传递(多层传递)爷爷向孙子
eventBus:公交车,中央事件总线
Vuex:解决eventBus的缺点用于大型项目,集中式储存和管理所有组件状态
ref:父组件通过$refs可以主动获取子组件的属性或者调用方法
$children/$parent($children:获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组,可以直接拿到子组件中所有数据和方法等
$parent:获取到一个父节点的 VueComponent 对象,同样包含父节点中所有数据和方法等)
.sync:子组件可以修改父组件的内容(其实就是双向绑定)

标签:通讯,parent,方式,VueComponent,传递,组件,方法,children
From: https://www.cnblogs.com/ltwlh/p/16860083.html

相关文章

  • Vue2的组件中data为什么不能使用对象
    当一个组件被定义,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果data仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通......
  • 多数据源连接的两种方式
    一、使用AbstractRoutingDataSource注入多种数据源1、在configuration配置两个数据源@ConfigurationpublicclassDataSourceConfig{@Bean@ConfigurationPr......
  • vue3使用mitt 实现组件之间通信 (不限制组件之间关系)
    安装mittyarnadd-savemittnpminstallmitt创建miit示例mitt.tsimportmittfrom'mitt'exportdefaultmitt()组件A中引入mitt并使用emit发送数......
  • 有封装过v-model相关的双向绑定组件吗?
    有的,之前在做⼀个通⽤的上传组件的时候,⼀开始是通过传统的⽗⼦通信实现的,⽗传⼦实现的图⽚回显,⼦传⽗实现的图⽚url抛出传给给接⼝,后来使⽤v-model做了⼀点优化,简单了不少......
  • Android 8.0 + Service开启方式兼容处理
    Android8.0+,对后台服务进行了限制了。如果依然采用之前startService()方式。会导致问题。前后台服务的一些区别:类别区别应用前台服务会在通知一栏显示ONGOING的Notifi......
  • 学习笔记——base标签、加密方式、JDBC、将java中添加的数据增加到数据库中
    2022-11-03一、base标签1、作用:用于添加web项目的前缀。2、放置位置:放置在head标签内部,一般放在首行。3、使用方式:<basehref="/项目名称/">,在html网页中的其他(例如:图......
  • 重写组件的方法
    通过mixins混入重写组件<script>import{Input}from'某UI库'exportdefault{name:'Home',mixins:[Input],//通过mixins混日,重写组件库的组件data()......
  • ​移动路由器做网站服务器该用哪种方式上网
     我有一个移动路由器。设置上网时,我应该选择哪一个上网呢。关于这个问题,路由器中上网的方式不是随意选择的。需要根据你家办理的宽带业务类型来选择,也可以说是由你家的宽......
  • IO(四、)FileReader第一种读取方式
    importjava.io.FileNotFoundException;importjava.io.FileReader;importjava.io.IOException;publicclassFileReader1{publicstaticvoidmain(String[]args......
  • react组件传值
    1.父传子1.1父组件准备数据,父组件通过属性age直接传递给子组件父importReact,{useState}from'react'importChildsfrom'./Childs'exportdefaultfunctio......