this.$parent的使用

最新推荐文章于 2024-08-27 15:49:12 发布
最新推荐文章于 2024-08-27 15:49:12 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zoukunyang/article/details/127448954
版权

在Vue中我们创建父子组件后通常通过props和$emit的方式传递数据，其实还有一种方式可以在子组件中直接调用父组件中的属性和方法。

// 在子组件中调用父组件中的属性
this.$parent.pageData.current

// 在子组件中调用父组件中的方法
this.$parent.getTableData()

提示：
方法有个前提条件：父组件在应用子组件的时候，位置不能随意放，例如不能放在element UI组件的插槽里, 通常要放在组件的根元素div里。

阿坤_21
关注
专栏目录
vue插槽02-作用域插槽 $parent,$children,递归组件
的博客
10-31 4016
文章目录1.作用域插槽2.读入数据总结 提示：以下是本篇文章正文内容，下面案例可供参考 1.作用域插槽 官网：有时让插槽内容能够访问子组件中才有的数据是很有用的。 代码如下（示例）： 2.读入数据 代码如下（示例）： data = pd.read_csv( 'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv') print(data.head()) 该处使用的url网络请求的数据。 总结 提示：这里对文章进行总结
VUE 子组件中 THIS.$PARENT 无法调用父组件的自定义方法，TypeError: this.$parent.xxx is not a function的问题
白给少年
05-20 4360
因为是小白，所以这个问题废了我九牛二虎之力，话不多说。 简单描述：遇到了在子组件中利用this.parent调用父组件的自定义方法，报TypeError:this.parent调用父组件的自定义方法，报TypeError: this.parent调用父组件的自定义方法，报TypeError:this.parent.xxx is not a function的错，可是在父组件明明定义了该方法，随即就在子组件中打印了this.parent，通过控制台的打印，发现打印出来的this.parent，通过控制台的打印
this.$parent
Aaron Con的博客
04-05 5813
在子组件中想要向父组件传值，我们通常使用this.$emit()方法，今天发现this.$parent可以直接调用到父组件的方法和属性，例如 // 在子组件中调用父组件的method1方法 this.$parent.method1() // 获取父组件属性值 this.$parent.prop 不过这个方法有个前提条件： 父组件在应用子组件的时候，位置不能随意放，例如不能放在element UI组件的插槽里, 通常要放在根元素div里 ...
knowLedge-子组件this.$parent.方法调用父组件报错（this.$parent.closeOverlay is not a function）
最新发布
2301_76671906的博客
08-27 303
this.$parent子组件调用父组件方法。this.$parent.closeOverlay is not a function； 解决方法（$emit来触发事件）
vue中的this.$parent
科技向善
04-20 2470
需要注意的是，使用this.$parent来访问父组件的数据和方法并不是一个好的做法，因为它会使子组件和父组件耦合在一起，使得代码难以维护和复用。使用provide和inject可以让父组件向子组件传递数据和方法，而不需要使用this.$parent来访问父组件。如果子组件需要调用父组件的方法，可以使用this.$parent.someMethod()来调用方法。可以用来获取组件的父实例，可以在子组件中使用它来访问父组件的数据和方法。例如，如果子组件需要访问父组件的数据，可以使用。
vue 里 this.$parent 作用
突维
05-15 4894
this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！
vue组件 $children,$refs，$parent的使用详解
08-29
vue 组件 $children, $refs, $parent 的使用详解 Vue 组件中，$children, $refs, $parent 是三个非常重要的属性，它们之间存在着紧密的联系，正确地使用它们可以帮助我们更好地管理和操作组件。 $children 属性 ...
Ant Design Vue 中遇到的坑（一） this.$parent 等的失效问题
陈乾的博客
12-31 3483
一、发生场景 在使用Ant Design 时，因为需求更改，在原本的代码外层又套上了UI组件，导致了原本在子组件中使用父组件的属性和方法失效。this.$parent.xx is not a function … 例如使用了： <a-tabs> <a-tab-pane key="1"> <div /> </a-tab-pane> </a-tabs> 二、原因 在使用Ant Design 的UI组
.$parent子组件无法调用父组件方法
qq_43723636的博客
04-18 669
在子组件tab.vue中，调用父组件方法 父组件含有该方法： 但偏偏报错： [Vue warn]: Error in v-on handler: "TypeError: this.parent.fatherMethodisnotafunction"；[system]TypeError:this.parent.fatherMethod is not a function"； [system] TypeError: this.parent.fatherMethodisnotafunction"；[sys
兄弟组件传数据:全局事件总线this.$bus.$emit/$on组件跳转过程多次发请求并且页面无法渲染的问题
qq_47530527的博客
03-30 2601
实现业务描述：有A和B两个组件要进行传一个哈希值，A组件获取哈希值后，需要跳转到兄弟组件B组件并且将哈希值传到B组件，具体代码如下图所示： A组件的逻辑 B组件的逻辑 问题描述：A组件中getContent事件只被emit触发了一次，但是B组件this.$Bus.$on中的回调函数却被执行了多次的现象。并且伴随着A组件与B组件跳转过程中回调函数被执行次数会依次增加。 产生原因：this.$Bus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件即A组件被注销，但.
vue的this.$parent的使用
qq_42264793的博客
09-24 1万+
vue组件this.$parent 在使用vue时,你可能会用到this.$parent来进行组件与组件或者组件与外部实例的数据以及方法调用,这里简单介绍下两种使用环境.(这里你可以理解外部实例为非第三方组件) 一、在实例中 this.$parent 写在组件里面,外部实例调用此组件,则其指向vue实例(这里是调用组件的实例),你可以在组件中调用 data,methods: //例子·???? this.$parent.list;//数据(模拟) this.$parent.request();//方法(
Vue中子组件调用父组件的3种方法实例——this.$parent调用方法、this.$emit触发方法、v-model方法传值
weixin_44867717的博客
08-29 2876
vue
this.$parent的作用 in Vue
PaoMianXianShen的博客
12-09 437
$parent的作用
vue——this.$parent算法
热门推荐
马娟的博客
08-30 1万+
父组件一：   父组件二：   子组件调用父组件一和父组件二中的方法
vue父子组件间传值(props)
weixin_30415801的博客
05-17 260
先定义一个子组件，在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { ...
vue中this.$parent用法
05-19
在Vue组件中，this.$parent属性可以用于访问...在这个例子中，我们使用了props来接收父组件传递的数据，并在mounted钩子函数中使用this.$parent来输出父组件实例。这样我们就可以在子组件中访问父组件的数据和方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值