vue2.0中this.$parent和this.$refs的使用

最新推荐文章于 2025-07-04 09:52:28 发布
原创 最新推荐文章于 2025-07-04 09:52:28 发布 · 置顶 · 2.2w 阅读 · 27 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

Hello，大家周末早上好最近有段时间没有及时更新博客抱歉了各位，今天给大家分享的这个是在我个人最近的项目中所学到的东西今天拿出来给大家分享一下。

大家先回顾一下vue2.0中子父之间互相传值的方式是什么样子的
子向父传值：this.$emit(“name”,“值”); 父接收：@name:name （自定义方法接收）；
父向子传值：:name=‘222’ 子接收：props:[‘name’] 接收

大家有没有想过其他的办法呢？今天咱们要讲的主角上场了。
1：项目结构
在这里插入图片描述
父级：components/views/index.vue
子级：components/views/header.vue / content.vue / footer.vue

父传子
父级：
在这里插入图片描述
子级：在这里插入图片描述
子传父：
子页面在这里插入图片描述
父页面：
在这里插入图片描述
这种方法也可以子父之间互相调用各自的方法！！！ 但是用this.$refs的时候有的时候回出现问题获取不到这个组件元素这就牵扯到了vue生命周期的问题

今天就到这里了 谢谢 大家 以后正常更新博客了 开心 ！ 溜了 溜了 溜了

vue2.0+vue3.0一学就会全套教程【组件注册与组件通信】
鑫阳的博客
01-07 888
组件（Component）是Vue.js最核心的功能，文章主要讲解组件如何注册使用，包括全局注册、局部注册、父子组件之间的如何进行通信传递数据的，非父子组件之间如何通信等等。
Vue2.0——组件
qq_56607109的博客
09-22 943
组件是可复用的 Vue 实例,主要用于开发中 具有相同特征不同数据的模块 把它集成为一个组件 供重复利用组件的属性不能用大写字母 组件的名字可以用驼峰命名法,但是使用的时候必须用连字符 全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)注册的组件不要跟系统标签同名一个vm实例可以有多个局部组件,但是只能供当前vm实例使用不能用外部data里面的数据，因为他是Vue全局的。必须要在过滤器中声明：而且必须在new Vue前申明，不然Vue里面的函数都加载完了还没有找到数据，就
knowLedge-子组件this.$parent.方法调用父组件报错（this.$parent.closeOverlay is not a function）
岂不闻
08-27 462
this.$parent子组件调用父组件方法。this.$parent.closeOverlay is not a function； 解决方法（$emit来触发事件）
vue3 的模板引用ref和$parent
最新发布
qq_41167198的博客
07-04 432
在组件中添加的ref属性也可以是函数，但是需要动态绑定，:ref,该函数会在组件更新以及卸载时调用，卸载时调用获取 的dom对象是个null/undefined,，函数的第一个参数，即是dom对象，需要将此数据定义给一个数据变量或者ref属性，来接收dom对象。对于组合式子组件，在父组件利用模板引用ref,获取dom对象，默认全部私有，父组件访问不了子组件的全部属性和方法，这时，就需要子组件利用defineExpose进行有选择的暴露部分属性和方法,模板引用ref，可以帮助我们获取子组件 的dom对象，
vue 里 this.$parent 作用
突维
05-15 4925
this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！
Vue里$refs与$parent用法及练习
weixin_44107140的博客
10-27 1596
Vue里$refs用法 用法一：ref加在普通的元素上，用this.$refs.name获取到的是dom元素 用法二：ref加在组件上，用this.$refs.name获取到的是组件实例，可以使用组价的所有方法 $parent用法 通过this.$parent可以访问到当前组件的父组件里所有的数据以及方法 Vue组件通信练习巩固 题目： 在Vue实例下data数据层有一个数组list(数据任意存放)，2个组件，组件1 cpn1有子组件cpnn1，cpnn1有子组件cpnnn1, 在组件cpnnn1
vue中的this.$parent
科技向善
04-20 2705
需要注意的是，使用this.$parent来访问父组件的数据和方法并不是一个好的做法，因为它会使子组件和父组件耦合在一起，使得代码难以维护和复用。使用provide和inject可以让父组件向子组件传递数据和方法，而不需要使用this.$parent来访问父组件。如果子组件需要调用父组件的方法，可以使用this.$parent.someMethod()来调用方法。可以用来获取组件的父实例，可以在子组件中使用它来访问父组件的数据和方法。例如，如果子组件需要访问父组件的数据，可以使用。
Vue（五）：2.0语法转3.0、setup函数、reactive函数、ref函数、isRef和toRefs方法、路由配置
Start_Simple的博客
03-14 1559
依赖Composition API、菜单分栏子路由
vue父子组件的方法调用和传值详解（总结）
weixin_44211164的博客
12-26 1782
vue父子组件的方法调用和传值详解（总结） 1、父组件引入子组件 方法一：使用Component标签 父组件 <!--引入活动配置模块--> 【4】模块引入 <component v-bind:is="activityConfig" ref="activityConfig" @getList="getList"></component> <scri...
详解vue2.0组件通信各种情况总结与实例分析
08-31
`$refs`只在组件渲染完成后可用，不建议在模板或计算属性中使用，因为它不是响应式的。 5. **数据反传——自定义事件** 自定义事件是Vue组件间通信的另一种重要方式，通过`v-on`或`.on`监听子组件触发的事件。子...
vue2中的this.$el,this.$parent,this.$children 在vue3中如何表示
lotpyve的博客
11-25 3297
当在 vue2 根据 this.$children 获取到的子组件是一个数组，而在 vue3 中通过 ref 获取到的子组件，如果只有一个 ref=xxx,获取到的 xxx 就是一个子组件实例，当有多个 ref=xxx 的时候，获取到的才是数组，下面来看一下详细的。然后在说一下 this.$children,在vue2中，this.$children 就是获取子组件的实例，vue3 我们可以通过 ref 获取。输出的是它的父组件，我们在vue3中获取父组件是这样的。让我们来看一下输出是什么样子的。
vue2组件通信(六)——兄弟组件$parent
浪头的博客
04-20 974
亲兄弟他们有着共同的父亲，在它们自己组件实例身上有一个$parent属性指向它们共同的 父组件，专栏中在全局事件总线那一篇博客介绍了vue组件身上有$on,$emit,$off三个api。 实现消息发布与订阅模式，实际上这也是消息发布与订阅模式，不过在这里中间人是它们 的父亲 // 接收数据组件 methods: { btn(){ this.$parent.$off("clg") this.$root.$off("hello") } },
初识vue 2.0（10）：使用$parent、$children父子组件通信
weixin_33872660的博客
12-07 396
使用 this.$parent查找当前组件的父组件。使用 this.$children查找当前组件的直接子组件，可以遍历全部子组件， 需要注意 $children 并不保证顺序，也不是响应式的。使用 this.$root查找根组件，并可以配合$children遍历全部组件。使用 this.$refs查找命名子组件。 例子： 父组件Game.vue <template> ...
vue2 子组件调用父组件方法
weixin_45458830的博客
11-27 1294
1. 直接在子组件中通过this.$parent.event来调用父组件的方法。2. 父组件把方法传入子组件中，在子组件里直接调用。
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的$root,$parent,$refs和$children
GengMS的博客
01-27 1379
说说vue的$root,$parent,$refs和$children 文章目录说说vue的\$root,\$parent,\$refs和\$children$root$parent$refs$children $root 访问根元素。 语法： this.$root.属性名。 在普通html工程内的用法看官网即可。 如果在vue-cli工程内使用$root: 有人可能认为根元素是App.vue。但是其实是main.js中new Vue这个实例，在new Vue这个实例中定义data即可 $root可以将根组
vue 父子组件之间访问 this.$refs 和 this.$parent
Lucky铂爵
03-26 634
项目结构 父组件 data Ptitle:'我是父组件' 子组件 data ChildTitle:'我是子组件' 父组件中 <build-modal ref="child"></build-modal> components: { BuildModal } mounted() { console.log(this.$refs.child.ChildTitle) //我是子组件 } 子组件中 mounted() { console.log(this.$pa
vue父子组件间传值(props)
weixin_30415801的博客
05-17 289
先定义一个子组件，在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { ...
vue2的this.$parent.$parent.$parent.$refs
09-01
在Vue2中，使用`this.$parent.$parent.$parent.$refs`可以访问父组件的父组件的父组件的`refs`对象。引用的代码是一个示例，其中父组件中的`this.$refs["detailForm"]`指向子组件`PDetail`的实例，通过`this.$parent.$parent.$parent.$refs`可以在子组件中访问父组件的父组件的`refs`对象。具体来说，在上述代码中，父组件`Appe`通过`ref="detailForm"`将子组件`PDetail`引用为`"detailForm"`，然后在子组件中可以使用`this.$parent.$parent.$parent.$refs.detailForm`来访问父组件的`refs`对象中的`detailForm`属性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue组件 $children,$refs，$parent的使用详解](https://download.csdn.net/download/weixin_38669091/12775877)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue中this.$parent、this.$root、this.$children、this.$ref的区别和作用](https://blog.csdn.net/weixin_44684303/article/details/124748102)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值