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
    }
  },

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

相关推荐

  1. vue 组件怎么获取组件里面data数据

    2023-12-27 18:36:04       15 阅读
  2. vue组件如何向组件传递数据

    2023-12-27 18:36:04       8 阅读
  3. vue实现组件组件传参

    2023-12-27 18:36:04       31 阅读
  4. Vue实现组件组件传值

    2023-12-27 18:36:04       16 阅读
  5. vue组件调用组件方法

    2023-12-27 18:36:04       33 阅读
  6. Vue.js 中组件调用组件方法

    2023-12-27 18:36:04       32 阅读
  7. 组件调用组件函数,获取组件变量

    2023-12-27 18:36:04       34 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-27 18:36:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-27 18:36:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-27 18:36:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-27 18:36:04       18 阅读

热门阅读

  1. 董事会在线审批决策任务都在哪里进行?

    2023-12-27 18:36:04       37 阅读
  2. 提升认识能力,远离诈骗

    2023-12-27 18:36:04       35 阅读
  3. 2312llvm,用匹配器构建clang工具

    2023-12-27 18:36:04       35 阅读
  4. 第33期 | GPTSecurity周报

    2023-12-27 18:36:04       32 阅读
  5. 微信小程序的bindtap和catchtap的区别

    2023-12-27 18:36:04       38 阅读
  6. PHP 处理菜单分级树状结构

    2023-12-27 18:36:04       43 阅读
  7. Centos设置IP地址的方法

    2023-12-27 18:36:04       37 阅读
  8. kotlin by lazy 的使用

    2023-12-27 18:36:04       37 阅读