vue父组件调用子组件方法this 指向问题_前端面试准备笔记系列之vue(03)

最新推荐文章于 2024-04-12 05:03:47 发布
最新推荐文章于 2024-04-12 05:03:47 发布
阅读量1.4k 收藏
点赞数
文章标签： vue父组件调用子组件方法this 指向问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34795681/article/details/113630492
版权
本文介绍了Vue中组件间的通信方式，包括父组件通过props向子组件传递参数，子组件通过$emit回调父组件方法，以及非父子组件间使用发布订阅模式（Event Bus）和Vuex进行通信。还详细讨论了父组件如何调用子组件方法，以及子组件如何反向调用父组件方法的多种途径。最后提到了兄弟组件间的通讯，并强调使用自定义事件时要注意内存泄漏问题。
摘要由CSDN通过智能技术生成

目录

01. vue组件间的参数传递

02. vue子组件调用父组件方法，父组件调用子组件方法

03. 兄弟组件之间如何通讯？自定义事件

正文

01. vue组件间的参数传递

  1. 父子组件传值
  • 父-》子 通过props

子组件接收什么参数是有规则的，既可以是数组也可以是对象。

  • 子-》父 $emit向外触发一个事件

注意：父组件可以随意向子组件传递参数，但是子组件不能反向修改父组件数据。单项数据流的概念。

props特性：props特性指的是当父组件使用子组件时通过属性向子组件传值时恰好子组件声明了对父组件传递过来的属性的一个接收；父子组件有个对应关系 父组件传递 --- 》子组件声明，特点是：属性的传递是不会在dom标签上进行显示的，当父父组件传递了属性子组件接收了属性在子组件里可以直接通过插值表达式取得属性里的内容

非props特性: 父组件向子组件传递了属性，但是子组件没有声明接收传递的内容，非props属性会显示在子组件最外层的dom标签的html属性里面

  1. 非父子组件传值
  • 一种是发布定位模式

发布定位模式在vue中成为总线机制/Bus/发布订阅模式/观察者模式

通过创建一个vue实例赋值给prototype.bus,目的是将prot

最低0.47元/天 解锁文章
sadstershi
关注
vue 关于父组件同时多次调用子组件而产生的 this取值 的bug问题
java123_PB的博客
08-31 2887
vue 关于父组件同时多次调用子组件而产生的 this取值 的bug问题 我们在开发vue项目的使用，会经常使用this这个关键字，this指向vue这个实例，我们可以使用this.来获取data里面的数据，但是在一些方法体内可能出现无法正常使用this,比如一些方法内，此时this指向的是这个方法函数，而不是vue，这是我们会定义一个变量that , let that = this; , 今天我就碰到一个that的问题。 发现问题了没有， 使用this和使用that，返回的数据完全不一样，可我明明在
vue父组件调用子组件方法this 指向问题_Vue实战030:子组件与父组件之间方法调用...
weixin_39899226的博客
02-04 805
前面我分享了vue实战027:子组件和父组件之间传值，今天继续分享子组件与父组件之间方法调用，在项目实战中我们经常会遇到组件之间方法调用的情况。Vue同样为我们准备了相关的方法来实现，他们就是$root、$parent、$refs、$children属性，其中$root、$parent是子组件向父组件调用方法，而$refs、$children则是父组件向子组件调用方法。$root与$parent的...
Vue中组件this指向问题
q879936814的博客
06-26 2739
提到vue的组件化开发，那么肯定会存在着data(){}用来存放数据，而一般使用的时候不能直接使用，而是需要用this来指向。 var app = new Vue({ el:"#app", data:{ }, components:{ aa:{ template:'#aaa', data(){
vue中父传子传递函数对应this指向问题
MISS_zhang_0110的博客
03-02 1516
vue中父传子传递函数对应this指向问题一、父组件二、子组件 一、父组件 <template> <div> 父组件 <Children :show="show"></Children> </div> </template> methods: { // 父方法接受参数 show() { console.log(this, 't
iview2.0 父组件访问子组件 方法
weixin_30814319的博客
04-30 201
//从父组件中访问子组件 可以给子组件定义标识 通过ref="chead" 定义 通过父组件就可以访问了 转载于:https://www.cnblogs.com/zhujiasheng/p/6789917.html...
Vue 父、子组件通信笔记
BasilGentleman的博客
04-08 388
父、子组件之间的消息相互传递 最近自己写的demo中有涉及到父、子组件消息的及时通信需求。 需求： 父组件需实时监听子组件发出消息 父组件向子组件传递了一张图片的地址 如果图片地址为空则显示上传的按钮，上传成功后，再将图片路径返回给父组件 父组件中使用子组件： @uploadCover ： 给子组件绑定一个名为 img 的事件 :parentImg ： 给子组件传递属性 <template> <my-upload-image @uploadCover="img" :parentI.
wepy 父调用子组件方法_微信小程序wepy框架笔记小结
weixin_39753747的博客
12-22 327
该框架是腾讯内部基于小程序的开发框架，设计思路基本参考VUE，开发模式和编码风 格上80%以上接近VUE优势组件化开发小程序虽然有标签可以实现组件复用，但仅限于模板片段层面的复用，业务代码与交互事件 仍需在页面处理。无法实现组件化的松耦合与复用的效果。wepy组件示例// index.wpyimport wepy from 'wepy';import List from '../component...
关于vue3组合式api （父组件和子组件之间的数据传递）笔记
m0_69097184的博客
08-24 351
直接上代码运行结果直接上代码运行结果。
vue中在父组件点击按钮触发子组件的事件
最新发布
m0_63102527的博客
04-12 477
webpack的loader到底是什么样的？两小时带你写一个自己loader。(img-TI2krYJB-1712869411344)]打开全栈工匠技能包-1小时轻松掌握SSR。谁说前端不用懂安全，XSS跨站脚本的危害。网易内部VUE自定义插件库NPM集成。生产环境下如歌部署Node.js。两小时精通jq+bs插件开发。
vue学习笔记之给组件绑定原生事件操作示例
10-15
现在，当用户点击子组件时，`handleClick`方法会直接在父组件中被调用，无需通过子组件的自定义事件进行通信。 总的来说，Vue组件绑定原生事件的关键在于理解Vue的事件系统和如何利用`native`修饰符。通过`@click....
vue中的this指向问题
qq_45656036的博客
05-19 254
1.vue中各种this指向(重要) .parent查看子组件中的父类,获取结果为单独对象.parent 查看子组件中的父类, 获取结果为单独对象 .parent查看子组件中的父类,获取结果为单独对象.children 查看组件(vue对象的)子类组件, 获取结果为数组 在不同组件中,this代表当前组件, 方法中: methods: 箭头函数指向为window 普通函数指向为 组件本身 created:(任意勾子函数) 箭头函数指向为 组件本身 普通函数指向为 window ...
vue父组件调用子组件的方法
weixin_43845550的博客
12-12 192
this.$nextTick(() => { this.$refs.infoapply.tableHeightFormAuto(); });
iview Tabs组件 点击tab标签页调用相应接口（顺带讲讲父组件获取子组件方法或值）
不积跬步何以至千里
02-20 2986
1.首先我的Tabs组件内容如下 <template> <Tabs size="small" :value="currentTab" @on-click="currentTabChanged"> <TabPane label="用户" name="user"> <add-users></add...
Vue框架--父子组件传值的方式
qq_58167492的博客
10-10 761
vue框架中的父子传值的方式
Vue中父子组件之间传值 ，兄弟组件之间传值（两种方法）
qq_56989560的博客
04-10 8488
一。子向父传值props 父组件向子组件传值： parent： <parent> <child :message="msg"></child> //父组件发送 </parent> data(){ return { msg: "this is parent message" } } child： <div> <p>{{message}}</p> </div.
vue 父子组件之间访问 this.$refs 和 this.$parent
Dafei4的博客
05-02 1569
01)vue父组件访问子组件this.$refs <div id="app"> {{ message }} <button value="点击" @click="p_click">点击获取子组件</button> <children_fei ref="children_ref"> </children_fei&...
this指向-作用域、作用域链-预解析 变量提升-Vue组件传值 父子 子父 非父子-Vue数据双向绑定原理
见贤思齐焉，见不贤内自省
11-12 3629
this指向-作用域、作用域链-预解析 变量提升-Vue组件传值 父子 子父 非父子-Vue数据双向绑定原理
Vue props传入的function中的this指向问题
CSU_Zipple的博客
08-26 4665
如果传入子组件的function是定义在methods中的方法，那么子组件调用此方法时方法内部依然是父组件的this。 initMethods function initMethods (vm: Component, methods: Object) { const props = vm.$options.props for (const key in methods) { // ...
react 组件传值 事件 状态机 改变this指向
YPX_YGWW的博客
12-02 447
props 正向传值 props能修改吗? props是只读的 不能修改 语法: props函数组件 语法 ： 只需要在函数组件中添加一个props的形参 即可使用props 子组件接收 // 子组件需要把props当成形参传入 let Zi=(props)=>{ let {text,num}=props ​ return( <div> zizizziziziziz---{text}--{num} ...
"Vue学习笔记：父子组件通信方法总结
通过$parent，子组件可以直接访问父组件中的数据和方法，实现数据共享和方法调用。 $children属性允许父组件访问其直接子组件的实例。通过$children，父组件可以直接访问子组件中的数据和方法，实现数据共享和方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值