vue子组件实时获取父组件的数据实现
更新时间：2023年12月25日 11:52:03 作者：香蕉钛合金
本文主要介绍了vue子组件实时获取父组件的数据实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
其实在vue中实现子组件实时获取父组件的数据有6种方式.
1、props/$emit；
2、子组件向父组件传值（通过事件形式）；
3、使用vuex；
4、使用$attrs/$listeners;
5、provide/inject；
6、$parent/$children与ref。
上述的六种方式，大家可以自行了解一下，多写一些就知道怎么使用了。接下来我将介绍，我在项目中使用到的方式：方式一。
项目截图：
场景：父组件通过实时的改变上述四个变量，并且子组件需要实时的获取父组件的变量去调用后端接口获取数据，最后将数据渲染到子组件的页面中。注：如果你的场景和我的很类似，那你也可以使用我的方式。
实现：
1、父组件：父组件只需要在选择改变上述变量的数据中，将数据赋值给info变量即可。该info变量子组件获取就行了。那么我们看看子组件怎么使用props获取info数据的。
2、子组件：在子组件中需要写一个props去获取info数据。子组件如果还想要实时获取父组件传递的数据，那么还需要实现watch监听变量的变化才可以。
props: {
info: {
type: Object,
default: () => ({})
}
},
watch: {
info: {
handler: function (newVal) {
this.newInfo = newVal;
console.log("newinfo",this.newInfo);
},
deep: true
}
},到此这篇关于vue子组件实时获取父组件的数据实现的文章就介绍到这了,更多相关vue子组件实时获取父组件数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
provide和inject主要为高阶插件/组件库提供用例,并不推荐直接用于应用程序代码中,下面这篇文章主要给大家介绍了关于Vue中provide、inject详解以及使用的相关资料,需要的朋友可以参考下2022-11-11
Message在开发中的使用频率很高，也算是Element-UI组件库中比较简单的，对于感兴趣的朋友可以一起探讨一下Message组件的实现，本文详细介绍了vue中this.$message的实现过程，感兴趣的同学可以参考一下2023-04-04
在 Vue2 项目中,ElementUI 的 el-form 组件是常用的表单组件,它提供了丰富的功能和样式,可以满足各种需求,本文给大家介绍Vue2+ElementUI表单、Form组件的封装过程,感兴趣的朋友跟随小编一起看看吧2024-03-03
在Vue2.x中，编写组件的方式是使用Options API，它的特点是在对应的属性中编写对应的功能模块，这篇文章主要介绍了Vue组合式API--setup中定义响应式数据详解,需要的朋友可以参考下2022-10-10
vue+element-ui+sortable.js实现表格拖拽功能
这篇文章主要为大家详细介绍了vue+element-ui+sortable.js实现表格拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
斗鱼直播是比较火的直播视频，想必大家都看过吧。这篇文章主要介绍了Vue-cli-webpack搭建斗鱼直播步骤详解,需要的朋友可以参考下2017-11-11
vue项目中字符串换行显示方式(返回的数据包含‘\r\n’字符)
这篇文章主要介绍了vue项目中字符串换行显示方式(返回的数据包含‘\r\n’字符)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue3.0封装轮播图组件的步骤，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要给大家介绍了关于vue中使用file-saver导出文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了Vue组件通信的几种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论