this.$parent

最新推荐文章于 2023-11-21 09:56:59 发布
最新推荐文章于 2023-11-21 09:56:59 发布
阅读量5.6k 收藏 12
点赞数 4
分类专栏： knowledge_point 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47979372/article/details/123978712
版权
  • 在子组件中想要向父组件传值，我们通常使用this.$emit()方法，今天发现this.$parent可以直接调用到父组件的方法和属性，例如
// 在子组件中调用父组件的method1方法
this.$parent.method1()
// 获取父组件属性值
this.$parent.prop
  • 不过这个方法有个前提条件： 父组件在应用子组件的时候，位置不能随意放，例如不能放在element UI组件的插槽里, 通常要放在根元素div里
Aaron Con
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element UI组件库el-dialog内程序刷新el-dialog内组件方法
09-15 3561
element UI组件库el-dialog内程序刷新el-dialog内组件方法
this.$children、this.$refs、this.$parent、this.$root
weixin_43939111的博客
04-28 5805
一、当需要拿到所有子组件的时候才会通过this.$children，返回的是一个存放所有子组件的数组，一般很少用，除非你的组件顺序变化不大且能清楚记住子组件的位置 this.$children[3].username //获取第四个子组件的data里的username数据 二、this.$ refs，给组件绑定ref属性，相当于html获取dom元素，this.$ refs返回的是一个对象 this.$refs.titleCpn.aaa //获取titleCpn组件中的aaa数据 ...
vue父子组件间传值(props)
weixin_30415801的博客
05-17 241
先定义一个子组件，在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { ...
vue 里 this.$parent 作用
突维
05-15 4854
this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！
uniapp子组件使用this.$parent调用父组件方法报错TypeError:this.parent.xxx is not a function
qq_50880219的博客
11-21 699
逐一增加$parent进行调试。
this.$parent为什么失效
weixin_45288172的博客
02-06 2034
this$parent不生效的原因。
组件通信大总结
于景波的技术博客
08-11 432
组件交互（传值，交互）分类： 父组件 => 子组件： 属性props // child props: { msg: String } // parent <HelloWorld msg="Welcome to Your Vue.js App"/> 引用refs // parent <HelloW...
vue组件 $children,$refs，$parent的使用详解
08-29
alert(this.$parent.msg); } ``` 这样，子组件可以访问父组件的数据和方法。 使用示例 下面是一个完整的示例，演示了 $children, $refs, $parent 的使用： ```html <!-- 父组件 --> <template id="parent...
vue父子组件间引用之$parent、$children
01-19
vue中提到【父子组件】，则一定会想到我们常用的父子组件通信：props+$on()、$emit() ，如图： 也就是说，虽然在一般情况下，子组件是不能引用父组件或者Vue实例的数据，但是对于在开发中出现的“数据需要在组件中...
实例详解vue中的$root和$parent
10-17
在这个例子中，`child.vue` 的 `created()` 生命周期钩子中，我们通过 `this.$parent.text` 访问到了父组件 `parent.vue` 中的 `text` 属性。 另外，虽然未在题目标签中提及，但值得一提的是 `$refs`。`$refs` 是 ...
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3957
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue2.0中this.$parent和this.$refs的使用
热门推荐
Liingot的博客
03-09 2万+
Hello，大家周末早上好最近有段时间没有及时更新博客抱歉了各位，今天给大家分享的这个是在我个人最近的项目中所学到的东西今天拿出来给大家分享一下。 大家先回顾一下vue2.0中子父之间互相传值的方式是什么样子的 子向父传值：this.$emit(“name”,“值”); 父接收：@name:name （自定义方法接收）； 父向子传值：:name=‘222’ 子接收：props:[‘name’...
jQuery ajax使用$(this).parent()无效解决方法
04-19 447
div=$(this).parent(); //先获取父级元素 div.remove(); //再删除 $(".delStu").click(function () { td = $(this).parent().parent(); if (c...
this.$parent.父组件函数，子组件调用父组件的函数
m0_49471668的博客
09-09 162
父组件
VUE2 VUE3 父子、隔代、兄弟组件的传值方式
alokka的博客
02-12 2万+
时隔一年多 vue 又增加了新的方法 2.2.0 新增 provide 和 inject （隔代传值） 2.4.0 新增 \$attrs 和 \$listeners （隔代传值）
Vue.js父组件$on无法监听子组件$emit触发事件解决办法
wo_buzhidao的博客
03-05 1万+
Vue.js父组件$on无法监听子组件$emit触发事件解决办法 最近学习vuejs看例子中用$on无法监听子组件$emit触发事件： 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);，这样this指的是todo-item的每一...
VUE源码分析之$parent $children 原理
liubangbo的专栏
09-20 643
我们在父组件中通过$children获取到子组件中的数据，同样我们在子组件中通过$parent可以获取到父组件中的数据。看下这个简单例子： <script src="./vue.js"></script> <div id="app"> <child-comp></child-comp> </div> <scr...
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介绍$parent()方法和$refs()方法
weixin_43966487的博客
01-24 1万+
Vue介绍parent()方法和parent()方法和parent()方法和refs(）方法 首先介绍这个两个方法的用处：parent()方法是在子组件中可以直接访问该组件的父实例或组件；而refs（）方式可以用来访问子组件的中的数据。 贴出代码 3.分析方法:（1）在41-51行代码中使用了parent()方法，首先不难看出this.parent()方法，首先不难看出this.paren...
vue3 this.$nextTick
最新发布
04-17
在Vue.js 3中，`this.$nextTick`一个用于在DOM更新后执行回调函数的方法。它的作用是在下次DOM更新循环结束之后执行指定的回调函数，以确保在更新后对DOM进行操作。 在Vue.js 3中，`this.$nextTick`方法已经被废弃，取而代之的是使用`nextTick`函数。你可以通过以下方式使用它： ```javascript // 在Vue组件中使用 this.$nextTick(() => { // 在DOM更新后执行的回调函数 }); // 在Vue实例中使用 Vue.nextTick(() => { // 在DOM更新后执行的回调函数 }); ``` `nextTick`函数接受一个回调函数作为参数，并在DOM更新循环结束后执行该回调函数。这样可以确保在更新后对DOM进行操作，以避免出现不一致的情况。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值