Vue父子组件

Dax
• 阅读 1190

几种常见的通信方式:

1、prop 属性

父组件通过绑定属性的方式,给子组件传值,同时子组件通过设置 props 来接收

 2、$emit

子组件通过调用 this.$emit(‘事件’,‘参数’) 给父组件通信,父组件通过监听 子组件的事件,来获取

 3、属性attrs 和 $listeners

4、EventBus (bus 总线)

思路就是声明一个全局Vue实例变量 EventBus , 把所有的通信数据,事件监听都存储到这个变量上。这样就达到在组件间数据共享了,有点类似于 Vuex,但复杂的项目还是用 Vuex

子组件通过 EventBus.$emit() 向外触发事件,父组件通过EventBus.$on() 来监听该事件,变量保存在EventBus

5、Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 6、通过ref 属性

//父组件

//子组件

  
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Alex799 Alex799
3年前
vue最新面试题
最近在面试,总结几个重点的面试题:一、vue父子组件之间的传值:简单来说,子组件通过props方法接受父组件传来的值,子组件通过$emit方法来向父组件发送数据。(具体案例可以看我之前写的博客)。二、vue生命周期函数:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestr
Chase620 Chase620
3年前
vue的8种通信方式
1.props/emit1.父组件向子组件传值下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:\'红楼梦','西游记','三国演义'\//section父组件<template<divclass"section"
Souleigh ✨ Souleigh ✨
3年前
React 组件间通信的10种方法
组件间通信方式总结父组件子组件:1.Props2.InstanceMethods子组件父组件:1.CallbackFunctions2.EventBubbling兄弟组件之间:1.ParentComponent不太相关的组件之间:1.Context2.Portals3.Global
爱丽丝13 爱丽丝13
3年前
React 组件通信之发布订阅模式
React通信react的数据流是单向的,react通信有以下几种方式:父向子通信:传入props子向父通信:父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值父向孙通信:利用context传值。React.createContext()兄弟间通信:​1、找一个相同的父组件,既可以用pr
马丁路德 马丁路德
3年前
vue3 - 组件通信
vue3组件通信和vue2的通信方式基本一致,只是存在写法上的差异props/emitsetup函数接收两个参数,props和context(上下文,其中有一个emit)用法展示//父组件<template<ibutton:type'type'@onClick
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这