美文网首页
vue provide 在mounted中数据更新之后没有传递

vue provide 在mounted中数据更新之后没有传递

作者: jeneen1129 | 来源:发表于2023-10-17 14:58 被阅读0次

使用方法

http://news.558idc.com/602962.html

// 父组件
export default {
  data() {
    return {
      count: 1
    }
  },
  provide() {
    return {
      message: 'Hello from parent', // 正常传值
      getCount: () => this.count 
    }
  }
}

// 子组件A
export default {
  inject: ['message', 'getCount'],
  mounted() {
    console.log(this.message);   // 输出:Hello from parent
    console.log(this.getCount()); // 输出:1   // 实时获取值
  }
}

原因:provide和inject是一个非响应式的特性,当provide提供的数据发生变化时,不会触发子组件的重新渲染。所以在使用provide和inject时,需要注意数据的更新问题。
说明:传函数,返回要获取的实时的值,相当于给了一个地址,自己实时去那个地址拿,而不是直接把值一次性拷过来。

相关文章

  • Vue.js 3.x 中跨层级组件如何传递数据?

    provide/inject 基本用法 在 Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 pro...

  • 响应式provide

    provide可以至上而下的传递数据。只是provide传递的数据是非响应式的。往往不能及时更新数据。如何响应式提...

  • 2021-03-19

    vue中的provide和inject 父组件向子孙组件传递数据,轻松跨级访问父组件数据 npm install ...

  • 使用useEffect

    对应Vue的mounted加载。第二个参数为空数组 对应mounted 或 update 之后更新。第一个参数正常...

  • vue实现不刷新整个页面刷新数据

    vue实现无刷新加载数据,使用的技术是依赖注入 关键字为provide inject在App.vue中 然后在...

  • vue 依赖注入

    vue中的依赖注入 provide 和 inject provide选项允许我们指定我们想要提供给后代组件的数据/...

  • 安卓软键盘重置页面

    vue中 在 mounted钩子中 重置高度, position:absolute;

  • vue刷新当前页面

    provide 与 inject结合使用 在父组件中定义 provide App.vue