vue的provide/inject实现响应式数据

本文参考：https://blog.51cto.com/u_15127690/4169650

父

export default {
  provide() {
    return{
      templateId: this.templateIdValue
    }
  },
  data() {
    return {
      templateIdValue: {value: ''}
    }
  },
  mounted() {
    this.templateIdValue.value = this.$route.params.templateId
  }
}

子

 export default {
   inject: ['templateId'],
   methods: {
      test: function () {
          console.log(this.templateId)
      }
}

VUE3

export const DEV_VIEW_ID = Symbol('DEV_VIEW_ID')
const devViewId = ref<String>()
provide(DEV_VIEW_ID, devViewId)
function currentChange(row: DevViewVO) {
  devViewId.value = row.id
}

const devViewId = inject<any>(DEV_VIEW_ID)
watch(
  () => devViewId.value,
  async (val) => {
    if (val) {
      await queryAllSchema(val)
    }
  }
)

强调： provide的是ref类型