VUE 3.0 注册全局属性方法

736 阅读1分钟

3.0之前

// 写法
// main.js
import Vue from 'vue'
import App from './App.vue'
import {deepClone} from '@/utils/index'

Vue.prototype.$deepClone = deepClone;

// 使用
// index.vue
<script>
export default {
  created(){
      let a = this.$deepClone(aa)
  }
}
</script>

3.0之后

// 写法
// main.js
import {createApp} from 'vue' 
import App from './App.vue' 
import {deepClone} from '@/utils/index'

const app = createApp(App) 
app.config.globalProperties.$deepClone = deepClone

// 使用
// index.vue
<script>
import {getCurrentInstance} from "vue";
export default {
// setup 中没有this实例
  setup() {
    // 第一种
    const internalInstance = getCurrentInstance();
    const deepClone = internalInstance.appContext.config.globalProperties.$deepClone;
    onMounted(() => {
        let a = deepClone(aa)
    });
    
    // 第二种
    const { proxy } = getCurrentInstance()
    onMounted(() => {
        let a = proxy.$deepClone(aa)
    });
  }
  created(){
      let a = this.$deepClone(aa)
  }
}


如有问题,欢迎探讨,如果满意,请手动点赞,谢谢!🙏

及时获取更多姿势,请您关注!!