vue子组件实时获取父组件的数据

您所在的位置:网站首页 vue父组件调用子组件的方法获取子组件的数据 vue子组件实时获取父组件的数据

vue子组件实时获取父组件的数据

2024-07-04 16:02| 来源: 网络整理| 查看: 265

其实在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 } },

以上就是使用props实现组件之间通信的方式,大家试一下吧



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3