vue3项目开发技术点总结

1.全局变量的定义和使用

1.1 定义全局变量

在main.js中，使用app.config.globalProperties定义:

//	添加属性aaa
	import { createApp } from 'vue'
	import App from './App.vue'
	import router from './router'
	import store from './store'
	let app = createApp(App)
	app.config.globalProperties.aaa = 123
	app.use(store).use(router).mount('#app')

1.2 组件中使用全局变量

 使用：getCurrentInstance().appContext.config.globalProperties 获取全局定义的变量

注意：只能在setup或者生命周期函数中使用

import { getCurrentInstance } from 'vue'
  export default {	
	setup() {
  // getCurrentInstance 意思是获取当前组件的上下文 只能在setup或者生命周期函数中使用
         getCurrentInstance().appContext.config.globalProperties.aaa
	}
}

参考：Vue3.0如何在setup中获取定义的全局方法_```木头人```的博客-CSDN博客

2.获取一个组件的对象

2.1 在ts文件中

通过 ref<InstanceType<typeof child>>() 获取对一个组件对象的ref类型对象

childRef.value的值包括在setup中返回的数据和prop传递过来的数据，等等...

import { ref } from 'vue'
import child from '@/components/child'

export function useChild(newCb?: CallbackFn, editCb?: CallbackFn) {
  const childRef = ref<InstanceType<typeof child>>()
  childRef.value.dialogVisible = true
}

2.2 在vue组件中

<template>
   <child ref=childRef></child>
</template>

<script lang=ts>
import { ref } from 'vue'
import child from '@/components/child'
export default defineComponent({
  name: 'user',
  components: { child },
  setup() {
    function useChild(newCb?: CallbackFn, editCb?: CallbackFn) {
      const childRef = ref<InstanceType<typeof child>>()
      childRef.value.dialogVisible = true
    }
  }
})
</script>

3.组件中导入的对象变成响应式

包裹在computed中，将返回的ref对象绑定到template中