vue 里 this.$parent 作用

最新推荐文章于 2024-07-22 11:34:18 发布

原创最新推荐文章于 2024-07-22 11:34:18 发布 · 7.1k 阅读

17 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了Vue中组件间的通信方式，包括子组件如何通过$parent访问父组件的数据和方法，以及如何使用$refs实现同级子组件之间的数据传递。例如，childA组件可以通过this.$parent.$refs.childB将data1的值赋给childB的data2。

1.子组件和组件的通信

this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！

2.子组件和同级别子组件的通信

<parentc>
	<childA></childA>    
	<childB ref="childB"></childB>
</parentc>

问：假设childA组件中定义了data1数据，我怎么把data1赋值传递给组件B的data2呢？

答：在childA组件中method里可以写如下，就ok了

this.$parent.$refs.childB.data2=this.data1

因为this. $p a r e n t 就相当于是拿到了父组件 t h i s .$ parent.$refs.childB就是拿到了childB 组件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Yetian_2000

关注关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

knowLedge-子组件this.$parent.方法调用父组件报错（this.$parent.closeOverlay is not a function）

岂不闻

08-27

528

this.$parent子组件调用父组件方法。this.$parent.closeOverlay is not a function；解决方法（$emit来触发事件）

Ant Design Vue 中遇到的坑（一） this.$parent 等的失效问题

陈乾的博客

12-31

3589

一、发生场景在使用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组

参与评论您还未登录，请先登录后发表或查看评论

this.$parent

Aaron Con的博客

04-05

5930

在子组件中想要向父组件传值，我们通常使用this.$emit()方法，今天发现this.$parent可以直接调用到父组件的方法和属性，例如 // 在子组件中调用父组件的method1方法 this.$parent.method1() // 获取父组件属性值 this.$parent.prop 不过这个方法有个前提条件：父组件在应用子组件的时候，位置不能随意放，例如不能放在element UI组件的插槽里, 通常要放在根元素div里 ...

vue中的this.$parent

科技向善

04-20

2816

需要注意的是，使用this.$parent来访问父组件的数据和方法并不是一个好的做法，因为它会使子组件和父组件耦合在一起，使得代码难以维护和复用。使用provide和inject可以让父组件向子组件传递数据和方法，而不需要使用this.$parent来访问父组件。如果子组件需要调用父组件的方法，可以使用this.$parent.someMethod()来调用方法。可以用来获取组件的父实例，可以在子组件中使用它来访问父组件的数据和方法。例如，如果子组件需要访问父组件的数据，可以使用。

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组件 $children,$refs，$parent的使用详解

08-29

vue 组件 $children, $refs, $parent 的使用详解 Vue 组件中，$children, $refs, $parent 是三个非常重要的属性，它们之间存在着紧密的联系，正确地使用它们可以帮助我们更好地管理和操作组件。 $children 属性 ...

vuex 解决报错this.$store.commit is not a function的方法

12-08

Vue.js 是一款流行的前端框架，用于构建用户界面。在大型项目中，数据管理变得复杂，因为需要在不相关的组件之间共享和同步数据。Vuex 是 Vue.js 的一个官方状态管理库，它提供了一个集中式的存储系统，使得在多个...

vue this.$parent

最新发布

12-19

`this.$parent` 是 Vue.js 中的一个实例属性，它允许你在组件内部访问其直接父组件实例。当你在一个子组件中需要访问到更上一层的组件数据或方法时，可以使用 `this.$parent`。例如，如果你有一个包含其他组件的 Vue...

vue父子组件间传值(props)

weixin_30415801的博客

05-17

300

先定义一个子组件，在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { ...

vue中的$parent和$child

m0_57836225的博客

07-22

1801

而父组件可以通过 $children 来获取子组件的实例，从而访问子组件的属性或调用子组件的方法。例如在子组件的方法中，可以使用 this.$parent.xxx 来获取父组件的属性或调用父组件的方法。在 Vue 中， $parent 表示当前组件的父组件实例，而 $children 表示当前组件的直接子组件实例集合（是一个无序的数组）。在上述示例中，子组件通过 this.$parent 获取到父组件实例，进而访问父组件的 msg 属性和 fun 方法。// 获取到所有的子组件。// 调用子组件的方法。

Vue中this.$parent的作用

zhang_zan

11-03

1050

this.$parent 可以访问到父组件上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！

vue——this.$parent算法

马娟的博客

08-30

1万+

父组件一：父组件二：子组件调用父组件一和父组件二中的方法

Vue 子组件使用 this.$parent 无法访问到父组件数据和方法

路虽远行则将至，事虽难做则必成。

06-28

4668

最近在使用父子组件时候，通过this.$parent访问父组件数据和方法，出现undefined的情况。实际场景是父组件有一个dialog弹出框，包含几个子组件form表单，根据标识只展示一个子组件。在子组件需要传递一个ID给父组件中的data数据，想到this.$parent(比较简便)，不想用this.$emit。但发现this.$parent 实例是有打印的，但是访问父组件数据和方法都是undefined的情况。

vue中this.$parent、this.$root、this.$children、this.$ref的区别和作用

qq_41976919的博客

07-19

269

vue中this.$parent、this.$root、this.$children、this.$ref的区别和作用

vue项目里在子组件内通过this.$parent无法获取父组件数据和方法的问题