经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue3中getCurrentInstance示例讲解
来源:jb51  时间:2023/3/24 9:02:43  对本文有异议

父组件中:

1.setup语法糖中导入子组件

2.在子组件标签上绑定ref值

3.setup内部从vue中按需导出 getCurrentInstance 方法

4.调用getCurrentInstance方法导出proxy

5.通过proxy.$refs.子组件ref名.子组件内属性/方法 实现调用

  1. <template>
  2. <!-- 父组件 -->
  3. <div>
  4. <!-- 子组件 -->
  5. <Child ref="child" />
  6. <button @click="changeChildren">子组件count+1</button>
  7. </div>
  8. </template>
  9. <script setup lang="ts" name="Father">
  10. import { getCurrentInstance, ComponetInternalInstance,ref } from "vue";
  11. import Child from "./zi.vue";
  12. const child = ref(null)
  13. // as ComponetInternalInstance表示类型断言,ts时使用。否则报错,proxy为null
  14. const { proxy } = getCurrentInstance() as ComponetInternalInstance;
  15. function changeChildren() {
  16. proxy.$refs.child.count += 1;
  17. //也可以使用ref数据.value的形式调用:
  18. //child.value.count += 1
  19. console.log(child.value.name)
  20. }
  21. </script>
  22. <style scoped></style>

main.js

  1. import api from "./utils/api.js"
  2. import StringUtil from "./utils/StringUtil.js"
  3.  
  4. app.config.globalProperties.api = api;
  5. app.config.globalProperties.StringUtil = StringUtil;
  1. import {getCurrentInstance } from 'vue';
  2.  
  3. const { proxy } = getCurrentInstance();
  4.  
  5. console.log(proxy.api);
  6. console.log(proxy.StringUtil.isBlank('1'));

方式一、通过 getCurrentInstance 方法获取当前组件实例,从而获取 route 和 router

Html

  1. <template>
  2. <div>
  3.  
  4. </div>
  5. </template>
  6. <script>
  7. import { defineComponent, getCurrentInstance } from 'vue'
  8.  
  9. export default defineComponent({
  10. name: 'About',
  11. setup(){
  12. const { proxy } = getCurrentInstance()
  13. console.log(proxy.$root.$route)
  14. console.log(proxy.$root.$router)
  15. return {}
  16. }
  17. })
  18. </script>

方式二:通过从路由中导入 useRoute useRouter 使用 route 和 router。

Html

  1. import { defineComponent } from vue'
  2. import { useRoute, useRouter } from ‘vue-router'
  3. export default defineComponent({
  4. setup () {
  5. const $route = useRoute()
  6. const r o u t e r = u s e R o u t e r ( ) c o n s o l e . l o g ( router = useRouter() console.log(router=useRouter()console.log(route)
  7. console.log($router)
  8. }
  9. })

附:Vue3中关于getCurrentInstance的大坑

开发中只适用于调试! 不要用于线上环境,否则会有问题!

解决方案:

方案1.

  1. const instance = getCurrentInstance()
  2. console.log(instance.appContext.config.globalProperties)

获取挂载到全局中的方法

方案2.

  1. const { proxy } = getCurrentInstance()

使用proxy线上也不会出现问题

总结

到此这篇关于vue3中getCurrentInstance的文章就介绍到这了,更多相关vue3中getCurrentInstance内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号