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子组件实时获取父组件数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！