Vue 2.7 provide/inject: 跨组件数据传递与响应式监听

Vue 2.7 提供了 provide 和 inject API，用于在父组件中提供数据、方法等，并在子组件中注入使用。使用 provide 和 inject 可以避免跨层级组件之间的数据传递问题，使代码更加简洁和灵活。

提供数据方法：

// 父组件
export default {
  provide() {
    return {
      name: 'vue',
      sayHello() {
        console.log('Hello Vue!')
      }
    }
  }
}

在子组件中使用：

// 子组件
export default {
  inject: ['name', 'sayHello'],
  mounted() {
    console.log(this.name) // 'vue'
    this.sayHello() // 'Hello Vue!'
  }
}

在 Vue 2.7 中，使用 inject 可以监听父组件提供的数据的变化，实现响应式更新。

// 父组件
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  provide() {
    return {
      message: this.message
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, World!'
    }
  }
}

// 子组件
export default {
  inject: ['message'],
  mounted() {
    console.log(this.message) // 'Hello, Vue!'
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`message changed from ${oldVal} to ${newVal}`)
    }
  }
}

在子组件中监听父组件提供的 message 属性的变化，当父组件中调用 changeMessage 方法更新 message 属性时，子组件会自动更新并触发响应式更新。