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子组件实时获取父组件数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
VUE的history模式下除了index外其他路由404报错解决办法
在本篇文章里小编给大家分享的是关于VUE的history模式下除了index外其他路由404报错解决办法，对此有需要的朋友们可以学习下。2019-08-08
这篇文章主要给大家介绍了关于Vue2父子组件传值的相关资料,Vue 2.0 中父子组件之间的传值可以通过属性(prop)和事件(event)实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue如何实现用户动态权限登录，文中的代码示例介绍的非常详细，对大家学习vue有一定的帮助，需要的朋友可以参考阅读2023-05-05
这篇文章主要介绍了Ant Design Pro 菜单自定义 icon，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
今天小编就为大家分享一篇vue实现在一个方法执行完后执行另一个方法的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
Dialog通常是指在Vue.js 3.x版本中使用的对话框组件,它是一个轻量级、易集成的弹窗插件,用于创建通知、确认消息、输入表单等交互场景,最近项目中遇到了全局挂载Dialog的需求,所以本文给大家介绍了Vue3全局挂载Dialog组件的方法,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了关于Echarts饼图图例太长的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
watch是一个侦听器，默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数，watchEffect是会自动收集函数里面变量的响应式依赖，本文主要来讲讲二者的区别，感兴趣的可以了解一下2023-07-07
这篇文章主要介绍了vue3使用echarts并封装echarts组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Vue.js获取被选择的option的value和text值方法
今天小编就为大家分享一篇Vue.js获取被选择的option的value和text值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论