vue中this.$parent的使用方式
vue组件this.$parent
在使用vue时,你可能会用到this.$parent来进行组件与组件或者组件与外部实例的数据以及方法调用,这里简单介绍下两种使用环境.(这里你可以理解外部实例为非第三方组件)
一、在实例中
this.$parent 写在组件里面,外部实例调用此组件,则其指向vue实例(这里是调用组件的实例),你可以在组件中调用 data,methods:
//例子 this.$parent.list;//数据(模拟) this.$parent.request();//方法(模拟)
二、在组件中调用组件
this.$parent 写在组件里面,外部组件调用此组件,则其指向这个组件:
举个例子：
比如elementPlus的组件 el-menu ,我们将其里面的一级二级菜单封装为一个组件,命名为 name:‘DemoMenu’,
//例子 <el-menu> <DemoMenu :list='list'/> </el-menu>
这种使用方式 this.$parent 就不是指向外部实例,而是指向 el-menu;
vue子组件this.$parent调用父组件方法报错
TypeError:this.parent.xxx is not a function
在做 vue 项目开发时，遇到了在子组件中利用this.$parent调用父组件的自定义方法，报TypeError: this.$parent.xxx is not a function的错，可是在父组件明明定义了该方法，遂查询 vue.js 的官方文档，但是文档也只有简短的说明，并没有相关的错误提示。
官方文档中没有提示，那就只能自己动手找原因了，随即就在子组件中打印了this.$parent ,通过控制台的打印，发现打印出来的 this.$parent并不是该组件的父组件，而是 Element ui 的组件，原来是我在父组件引用子组件的时候还在外面套了多层 UI 组件导致的。
<div class='app-container'> <el-row :guter='20'> <el-col> ...... <el-card> ...... <el-tabs v-model="activeName" @tab-click="handleClick"> <p slot="title">标题</p> <my-component></my-component> </el-tabs> </el-card> </el-col> </el-row> </div>
打印this.parent会发现my−component的父组件为 parent会发现my-component的父组件为parent会发现my−component的父组件为 $el:div#pane-userinfo.el-tab-pane,需要一直$this.parent.parent.parent.parent.parent.parent找到 $el:div.app-contain 才可调用父组件方法。
或者将子组件移到 UI 组件外面也可以调用到
<div class='app-container'> <my-component></my-component> </div>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
element-plus结合sortablejs实现table行拖拽效果
使用element-plus的el-table组件创建出来的table,结合sortable.js实现table行拖动排序,文中有详细的代码示例供大家参考,具有一定的参考价值,感兴趣的同学可以自己动手试一试2023-10-10
文章描述了在使用官网命令创建Nuxt3项目时遇到的问题,通过分析命令,推测问题出在拉取项目模板失败,解决方法是手动访问并下载项目模板,解压后按照官网教程安装依赖并启动,最终成功解决问题2024-12-12
策略模式（Strategy Pattern）又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法。这篇文章主要介绍了策略模式实现 Vue 动态表单验证,需要的朋友可以参考下2019-09-09
Vue+Openlayer使用modify修改要素的完整代码
这篇文章主要介绍了Vue+Openlayer使用modify修改要素的完整代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-09-09
vue3中的reactive、readonly和shallowReactive使用详解
在 Vue3 中,可以使用 shallowReactive 函数创建一个浅层响应式对象,它接收一个普通对象作为参数,返回一个浅层响应式代理对象,本文给大家介绍vue3中的reactive、readonly和shallowReactive使用,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要介绍了Vue3中操作ref的四种使用方式示例代码(建议收藏),本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
在开发中我们常常会遇到需要让滚动条保持到最底端的需求,比如在开发一个聊天框时,请求接口拿到消息列表数据,展示到前端页面时,需要让滚动条自动滚到最底端,以此来展示最后的聊天记录,这篇文章主要介绍了Vue如何设置滚动条自动保持到最底端,需要的朋友可以参考下2024-08-08
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
本文通过实例代码给大家介绍了Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能,需要的朋友可以参考下2018-08-08
这篇文章主要给大家介绍了关于vue复制内容到剪切板代码实现的相关资料,在Web应用程序中剪贴板(Clipboard)操作是非常常见的操作之一,需要的朋友可以参考下2023-08-08
本文主要介绍了rollup3.x+vue2打包组件的实现，详细的介绍了打包会存在的问题，包版本的问题，babel 转换jsx等问题，具有一定的参考价值，感兴趣的可以了解一下2023-03-03
最新评论