this.$parent的使用

最新推荐文章于 2023-08-11 22:48:45 发布
原创 最新推荐文章于 2023-08-11 22:48:45 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端

本文介绍了在Vue框架中，除了常规的props和$emit通信方式外，如何直接在子组件内部调用父组件的属性和方法。通过示例代码展示了如何使用`this.$parent`来访问父组件的属性如`pageData.current`和调用方法如`getTableData()`。但需要注意，这种方法存在限制，即父组件在挂载子组件时，子组件不应被放置在某些特定组件的插槽内，通常建议将其置于组件的根元素div中。

在Vue中我们创建父子组件后通常通过props和$emit的方式传递数据，其实还有一种方式可以在子组件中直接调用父组件中的属性和方法。

// 在子组件中调用父组件中的属性
this.$parent.pageData.current

// 在子组件中调用父组件中的方法
this.$parent.getTableData()

提示：
方法有个前提条件：父组件在应用子组件的时候，位置不能随意放，例如不能放在element UI组件的插槽里, 通常要放在组件的根元素div里。

knowLedge-子组件this.$parent.方法调用父组件报错（this.$parent.closeOverlay is not a function）
岂不闻
08-27 529
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组
jQuery属性操作
Hst1120的博客
11-22 1205
jQuery属性操作 1.1设置或获取元素固有属性(元素本身只带的属性)属性值prop() 1.获取属性语法 prop(“属性”) 2.设置属性语法 prop(“属性”,“属性值”) 1.2设置或获取元素自定义属性attr() 1.3数据缓存 data() data()方法可以在指定的元素上存数据，是存放在元素的内存里面，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据将被移除 <a href="www.baidu.com" title="很好">都挺好</a> &lt
Vue基础：父子组件访问的方式
qq_51066068的博客
08-30 1183
有时候我们需要父组件直接访问子组件（通过$children或$refs），子组件直接访问父组件（$parent）。
this.$parent
追逐知识的过程最能使我们意识到自己的无知...
12-13 224
组件传值，子组件引用父组件的方法与属性值
vue组件 $children,$refs，$parent的使用详解
08-29
vue 组件 $children, $refs, $parent 的使用详解 Vue 组件中，$children, $refs, $parent 是三个非常重要的属性，它们之间存在着紧密的联系，正确地使用它们可以帮助我们更好地管理和操作组件。 $children 属性 ...
[uniapp] uview(1.x) 二次封装u-navbar 导致 :custom-back函数this.$emit / this.$props失效问题处理
iOSTianNan的博客
08-11 1938
uniapp 项目: 使用了uview框架 1.x版本其中对于组件 u-navbar , 想要进行二次简单封装,把一些固定样式/固定配置等预写好, 同时对默认的返回按钮做一层前置拦截,方便后续扩展.一圈搞下来, 我们有了两种解决办法方案2.3和方案3至此,对于uview(1.x)的组件u-navbar的二次封装中遇到的自定义事件的处理, 也算完成.至于选择 上面哪两种方案?我从封装的角度出发, 我会采用方案2.3毕竟, 二次封装也是为了后续使用方便, 还是延用u-navbar。
兄弟组件传数据:全局事件总线this.$bus.$emit/$on组件跳转过程多次发请求并且页面无法渲染的问题
qq_47530527的博客
03-30 2764
实现业务描述：有A和B两个组件要进行传一个哈希值，A组件获取哈希值后，需要跳转到兄弟组件B组件并且将哈希值传到B组件，具体代码如下图所示： A组件的逻辑 B组件的逻辑 问题描述：A组件中getContent事件只被emit触发了一次，但是B组件this.$Bus.$on中的回调函数却被执行了多次的现象。并且伴随着A组件与B组件跳转过程中回调函数被执行次数会依次增加。 产生原因：this.$Bus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件即A组件被注销，但.
vue中的this.$parent
科技向善
04-20 2817
需要注意的是，使用this.$parent来访问父组件的数据和方法并不是一个好的做法，因为它会使子组件和父组件耦合在一起，使得代码难以维护和复用。使用provide和inject可以让父组件向子组件传递数据和方法，而不需要使用this.$parent来访问父组件。如果子组件需要调用父组件的方法，可以使用this.$parent.someMethod()来调用方法。可以用来获取组件的父实例，可以在子组件中使用它来访问父组件的数据和方法。例如，如果子组件需要访问父组件的数据，可以使用。
vue 里 this.$parent 作用
突维
05-15 4935
this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！
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中子组件调用父组件的3种方法实例——this.$parent调用方法、this.$emit触发方法、v-model方法传值
weixin_44867717的博客
08-29 3258
vue
this.$parent的作用 in Vue
PaoMianXianShen的博客
12-09 498
$parent的作用
vue——this.$parent算法
热门推荐
马娟的博客
08-30 1万+
父组件一：   父组件二：   子组件调用父组件一和父组件二中的方法
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 4370
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue父子组件间传值(props)
weixin_30415801的博客
05-17 300
先定义一个子组件，在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { ...
vue组件之间通信的8种方式
weixin_30418341的博客
03-20 808
对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。 props和$emit(常用) $attrs和$listeners 中央事件总线（非父子组件间通信） v-model provide和inject $parent和$children vuex 1.props和$emit 　　父组件向子组件传递数据是通过prop传递的...
this.$parent undefined
最新发布
08-27
在 Vue.js 中使用 `this.$parent` 时出现 `undefined` 的问题，通常与组件的层级结构、生命周期或数据传递方式有关。以下是对该问题的原因分析和解决方法。 ### 原因分析 1. **组件层级嵌套不明确** Vue 的组件...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值