vue 里 this.$parent 作用

最新推荐文章于 2024-05-28 07:05:14 发布
最新推荐文章于 2024-05-28 07:05:14 发布
阅读量6.9k 收藏 16
点赞数 3
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yetian_2000/article/details/112866733
版权

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就相当于是拿到了父组件 this. parent就相当于是拿到了父组件this.parent.$refs.childB就是拿到了childB 组件

Yetian_2000
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue父子组件间引用之$parent、$children
01-19
vue中提到【父子组件】，则一定会想到我们常用的父子组件通信：props+$on()、$emit() ，如图： 也就是说，虽然在一般情况下，子组件是不能引用父组件或者Vue实例的数据，但是对于在开发中出现的“数据需要在组件中来回传递”，我们最简单的解决办法就是通过props（和v-on）将数据从父组件传到子组件，再用$emit将数据从子组件传到父组件，以此循环引用。 但是在另一些场景下，我们可能想要比如（在父组件中）拿到子组件对象，然后直接操作其中数据，去实现一些功能，比如方法的调用。 有时候我们需要父组件直接访问子组件、子组件直接访问父组件，或者子组件访问根组件： 父组件访问子组件：
vue组件 $children,$refs，$parent的使用详解
08-29
本篇文章主要介绍了vue组件 $children,$refs，$parent的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue组件通讯$parent和$children获取单签组件的⽗组件和当前组件的⼦组件的例子
最新发布
codedadi的博客
05-28 690
在 Vue 中，$parent 和 $children 是实例属性，允许你访问组件的父组件和子组件。但是，请注意，这些属性主要用于在开发过程中进行调试和临时访问，并不推荐在正常的组件通信中使用，因为它们破坏了组件的封装性和可重用性。在这个例子中，父组件通过 $children 数组可以访问到它的子组件（尽管我们只知道第一个子组件），而子组件则可以直接通过 $parent 访问到它的父组件。不过，为了满足你的要求，我将提供一个简单的例子来说明如何使用 $parent 和 $children。
vue父子组件间传值(props)
weixin_30415801的博客
05-17 241
先定义一个子组件，在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { ...
Vue $parent、子组件调用父组件方法，父组件调用子组件方法、值
林中明月间丶
06-10 4574
https://blog.csdn.net/zgrkaka/article/details/100528714
vue中的this.$parent
科技向善
04-20 2213
需要注意的是，使用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中this.$parent的作用
zhang_zan
11-03 922
this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！
实例详解vue中的$root和$parent
10-17
在这个例子中，`child.vue` 的 `created()` 生命周期钩子中，我们通过 `this.$parent.text` 访问到了父组件 `parent.vue` 中的 `text` 属性。 另外，虽然未在题目标签中提及，但值得一提的是 `$refs`。`$refs` 是 ...
vue 父组件通过$refs获取子组件的值和方法详解
10-16
-- parent.vue --> <children ref='ch'></children> 父组件 import children from './coms/children' export default { data() { return {} }, components: { children }, methods: { onclick() ...
vue——this.$parent算法
马娟的博客
08-30 1万+
父组件一：   父组件二：   子组件调用父组件一和父组件二中的方法
Vue.js 父子组件通讯
wxc_niuniu的博客
09-05 5163
vue.js，是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。（这是官方的一个解释！） 小编没使用过angularjs，也没使用过react.js，不能详细的说明三者的区别，想了解的话，在官方有一个分析，请点这里查看小编从业前端开发也有了一年多的时间，刚开始的时候，前端开发展现的技术太多，小编有心无力，兼顾不过来，经过了解之
本文介绍了vue组件 $children,$refs，$parent的使用
GoodIdea
07-06 629
如果项目很大，组件很多，怎么样才能准确的、快速的寻找到我们想要的组件了？？ 1）$refs 首先你的给子组件做标记。demo ：&lt;firstchild ref="one"&gt;&lt;/firstchild&gt; 然后在父组件中，通过this.$refs.one就可以访问了这个自组件了，包括访问自组件的data里面的数据，调用它的函数 2）$children 他返回的是一个组件...
vue中this.$parent、this.$root、this.$children、this.$ref的区别和作用
qq_41976919的博客
07-19 207
vue中this.$parent、this.$root、this.$children、this.$ref的区别和作用
vue项目里在子组件内通过this.$parent无法获取父组件数据和方法的问题
热门推荐
weixin_55894946的博客
07-08 3万+
vue项目里在子组件内通过this.$parent无法获取父组件数据和方法的问题
Vue中$parent 和$children的使用
cofecode的博客
07-07 1万+
$parent 该组件实例的父级组件实例$children 该组件实例的子组件实例上代码html部分<div id='box'> <parent ref='pa'></parent> </div> script部分Vue.component('parent',{ template:`<div><h1>父组件</h1><child></child></div>`,
vue中this.$parent用法
05-19
在Vue组件中，this.$parent属性可以用于访问当前组件的父组件实例。这个属性可以用于访问父组件的数据或者方法。 例如，假设我们有一个父组件和一个子组件，我们想要在子组件中访问父组件的数据： ```html <template> <div> <p>我是子组件</p> <p>父组件的数据：{{ parentData }}</p> </div> </template> <script> export default { props: ['parentData'], mounted() { console.log('父组件实例:', this.$parent) } } </script> ``` 在这个例子中，我们使用了props来接收父组件传递的数据，并在mounted钩子函数中使用this.$parent来输出父组件实例。这样我们就可以在子组件中访问父组件的数据和方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值