element-ui vue子组件调用父组件（$parent）的坑

最新推荐文章于 2022-09-04 15:35:30 发布
最新推荐文章于 2022-09-04 15:35:30 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： vue enement ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40917182/article/details/118677799
版权
  • 使用element-ui 子组件调用 父组件，用到 p a r e n t 时 ， 使 用 < e l − c o n t a i n e r > < / e l − c o n t a i n e r > ， < e l − m a i n > < / e l − m a i n > 布 局 时 ， 发 现 ， ， 报 错 T y p e E r r o r : " t h i s . parent 时，使用<el-container></el-container>，<el-main></el-main>布局时 ，发现，，报错TypeError: "this. parent时，使用<el−container></el−container>，<el−main></el−main>布局时，发现，，报错TypeError:"this.parent.b(data)“ is not a function，咋回事呢？
    vue中使用的话，如果父组件中不是直接引入的子组件，而是写了n层UI才引入，子组件中调用的时候需要this. p a r e n t . parent. parent.parent… p a r e n t . m e t h o d N a m e ( ) 需 要 n 个 parent.methodName() 需要n个 parent.methodName()需要n个parent，若直接使用$emit,则没问题的！
Mr Xu Luka
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 子组件使用 this.$parent 无法调用父组件中的方法
godev的博客
04-22 4257
this.$parent 无法调用父组件中的方法1. 遇到的问题2. 分析3. 解决4. 总结 1. 遇到的问题 在开发 Vue 项目中，遇到了一个这样的问题: 其中UI框架使用的是iview UI , 在子组件中利用 this.$parent.getList() 调用父组件中的 getList() 方法, 发 现调用不到该方法, 然后通过 this.$parent.$parent.getList() 就可以调用到 2. 分析 在子组件中打印 this.$parent，通过控制台的打印，发现打印出来
$parent属性
manyangyangya的专栏
03-13 387
尽量避免使用$parent属性，因为它在AngularJS表达式和模板创建的DOM结构间建立了强关联。对HTML结构轻微的改变就可能毁掉整个应用。 
vue elementui 里通过this.$parent.$parent找不到上级变量或方法的解决方案
搬砖小白灿哥哥
07-06 1939
vue elementui 里通过this.$parent.$parent找不到上级变量或方法的解决方案
使用elementui+vue 遇到this.$parent.xxxxx is not function
Q010_的博客
07-21 1748
问题复现 这个是父组件 这个是子组件 报错说是方法不是一个function 输出this.$parent一下确实不是父组件 解决继续.$parent 成功
vue子组件this.$parent调用父组件方法报错TypeError:this.parent.xxx is not a function
weixin_40151813的博客
03-23 1万+
在做 vue 项目开发时，遇到了在子组件中利用this.parent调用父组件的自定义方法，报‘TypeError:this.parent调用父组件的自定义方法，报`TypeError: this.parent调用父组件的自定义方法，报‘TypeError:this.parent.xxx is not a function`的错，可是在父组件明明定义了该方法，遂查询 vue.js 的官方文档，但是文档也只有简短的说明，并没有相关的错误提示。 官方文档中没有提示，那就只能自己动手找原因了，随即就在子组件中打印
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
2. **刷新父节点状态**：删除节点后，需要更新其父节点的`loaded`属性为`false`，并调用`expand()`方法，以重新加载父节点的子节点数据。 ```javascript let nodeToRemove = this.$refs.tree.getNode(nodeId); // ...
qt webview 调用 饿了么element组件 demo
最新发布
06-25
Element UI是饿了么团队开发的一款基于Vue.js的前端UI组件库，提供了丰富的界面元素和组件，适用于企业级后台管理系统。 首先，确保你已经安装了Qt开发环境，并且在项目中引入了WebView模块。在Qt Creator中，你...
jquery-ui-1.8.12.rar
03-14
2. 小部件（Widgets）：如按钮、对话框、进度条等，它们是预定义的UI组件，可以通过简单的API调用实现。 3. 效果（Effects）：包括动画、过渡和视觉特效，为页面动态效果提供支持。 4. 插件（Plugins）：扩展了...
vue+elementUI动态生成面包屑导航教程
10-16
在示例代码中，我们看到一个基于`el-menu`组件构建的导航栏，它是Element UI提供的一个强大的导航组件，可以处理子菜单和选中状态。`v-for`指令用于遍历`menus`数组，这是包含所有菜单项的数据源。`v-if`和`v-else-...
vue中的provide/inject的学习使用
12-10
provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。 需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能...
关于elementui中dialog组件中的全局组件无法用$parent调用父组件的方法的问题
weixin_42012429的博客
06-19 1307
关于elementui中dialog组件中的全局组件无法使用$parent调用父组件的方法的问题 1.在日常用SPA模式开发日常中经常碰到一种需求,就是好多模块会经常用到一样的模块或者代码块,我们将这些可以复用的代码块放到一个文件夹中来供其他组件调用,通过调用相同的方法来实现相同的功能. 需求:因为dialog模块占用太多行代码所以,决定将dialog组件封装成一个子组件,通过prop传递的true或者false来进行dialog的显示或者隐藏,在dialog组件中引用了全局组件的table组件,封装了显
vue中的组件通信
aliven1的博客
06-20 255
子组件触发sendinfo事件，调用父组件函数getinfo,其中key获得父级的自定义的字段，value对应的是子组件传递过来的数据 子组件向父组件传递数据的时候，如果绑定到元素上，且带参数，在触发的时候，如果不传参数（@click="close"），第一个参数是事件对象，close(refresh=false)，@click="close(true)"这样写就不会有问题 ...
vue+element 子组件调用父组件失败
weixin_43721554的博客
10-01 1743
项目中遇到vue子组件调用父组件的方法，我写的是this.$emit('search');但是没有成功，查了下说有三种子组件调用父组件的方式： 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </div> </template> <script> import child from '~
vue父组件调用子组件方法this 指向问题_Vue实战030:子组件与父组件之间方法调用...
weixin_39899226的博客
02-04 790
前面我分享了vue实战027:子组件和父组件之间传值，今天继续分享子组件与父组件之间方法调用，在项目实战中我们经常会遇到组件之间方法调用的情况。Vue同样为我们准备了相关的方法来实现，他们就是$root、$parent、$refs、$children属性，其中$root、$parent是子组件向父组件调用方法，而$refs、$children则是父组件向子组件调用方法。$root与$parent的...
vue中父子组件之间的访问方式-$children-$refs-$parent
fangqi20170515的博客
09-04 538
通过$parent获取父组件的数据，实际开发中尽量少用，因为这样会导致耦合度太高了；通过这样直接修改父组件的数据或状态，使父组件的状态（数据）飘忽不定，不利于后期的调试和修改。需要和ref一起使用；通过属性去获取子组件，无论去掉哪个子组件，只要不把所对应的ref所删除，就一直可以放到到自己需要的子组件。缺点：需要通过索引才能拿到自己想要的子组件，如果删除了某个子组件，会影响到哪去的子组件的结果，$children返回的是一个。，包含所有的子组件对象；
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();//方法(
vue6 $ parent $root $children $refs(了解)
duzhe17629085113的博客
12-15 240
this 名字为vue componnet 组件继承了官方的一个类vue componnet 只的是new vue 打印得出有这些 打印出来两个子组件 不建议使用 因为是高内聚 高耦合 每一个组件都可以修改父组件的东西 $root: 访问根组件vm对象,所有的子组件都可以将这个实例作为一个全局 store 来访问或使用,现在有更好的技术vuex代替。 $parent:访问父组件对象,直接操作父组件的data数据,不需要再使用属性传值,但是容易出现渲染混乱之后只渲染一...
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3969
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
为什么在子组件中使用$parent获取不到父组件里的变量值?如何在父子组件里面实现双向数据绑定。子组件改变父组件里面得值并且要给父组件返回
肖肖肖丽珠的博客
05-27 9107
父子组件的通信一般使用props和emit来传值的。但是这种是单向的数据绑定。子组件接受父组件的传值，然后就把某个值传给父组件。参考：https://blog.csdn.net/qq_33769914/article/details/81012431 如何实现在父组件里面直接调用子组件里面的变量。在子组件直接使用父组件的变量。 父组件 <template> &lt...
vue子组件调用父组件方法$emit没有生效
04-23
当Vue子组件调用父组件方法$emit没有生效时，可能有以下几个原因： 1. 事件名称不匹配：请确保子组件中使用$emit方法时，事件名称与父组件中监听的事件名称一致。例如，子组件中使用$emit('my-event')，则父组件中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr Xu Luka

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值