provide和inject的使用

在vue项目中使用provide和inject传值

1、传递值的组件

export default {
  name: "panorama", //组件名字
  provide() {
    return {
      panorama: this, //拿到data里的全部值
    };
  },
  data() {
   return {
       name: '张三',
       arr: [],
       obj: {},
       ...
  }
 }
}

2、接收值的组件

export default {
  inject: ['panorama'],
  data() {
    return {
      name: "",
    }
},
mounted() {
    console.log(this.panorama) //控制台看一下接到的值,需要什么值可以监听一下
},
watch: {
    'panorama.name'(newVal) {
      if (!newVal) return
      this.getUserInfo(newVal)
    },
  },
 methods: {
     getUserInfo(newVal) {
      this.name = newVal
    },
  },