Vue入门--第五天--provide/inject

最新推荐文章于 2025-01-15 19:14:00 发布

王大锤_code

最新推荐文章于 2025-01-15 19:14:00 发布

阅读量333

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44809439/article/details/109625629

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Vue的provide/inject特性，用于子组件改变父组件数据。父组件通过provide提供变量，子组件通过inject接收并使用，若需改变值，建议通过父组件传递的函数进行操作，以保持数据流动的清晰性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue-provide-inject

子组件要改变父组件的数据
父组件中

provide(){
  return {
    themName: this.themName
  };
},
data(){
  return {
    themName: "blue",
    fontSize: "normal"
  };
},

上面的provide就把themName提供给别人了，不过themName是字符串，不是对象数组这些提供引用，外面改了是没有用的，因为是提供了复制的字符串。

子组件中

inject: ["themName"],

就能使用这个themName了。
要改变这个值，就从父组件传递函数就好了。

父组件中

provide(){
  return {
    themName: this.themName,
    changeTheme: this.changeTheme
  };
},
data(){
  return {
    themName: "blue",
    fontSize: "normal"
  };
},
methods: {
  changeTheme(){
    if(this.themeName === 'blue'){
      this.themeName = 'red'
    }else {
      this.themeName = 'blue'
    }
  },
}

子组件中
inject: ["themName", "changeTheme"],
子组件中就可以在methods中使用

methods: {
  x(){
    this.changeTheme()
  }
}

通过this来调用,然后通过传递过来的函数，来改变父组件中的data数据。

总结

provide和inject
作用：大范围的data和method共用
注意：值和改变值的方法都要传递过去。

引用（对象，数组）可以传过去，直接不用方法改父组件的数据，但是感觉不规范，不用传方法就可以改变了，很容易不知道数据在哪被改变。