Vue3定义全局变量的方式总结(附代码)

2024-04-18 0 548
目录
  • 1、main.js 设置全局变量。
    • (1)在模板中使用:
    • (2)在语法糖<script setup>里使用:
    • (3)组件实例中使用
  • 2、使用provide定义变量、inject获取变量
    • (1)父组件使用provide定义变量
    • (2)子组件通过inject获取变量
  • 附:定义全局函数Vue2 和 Vue3 的区别
    • 总结

      1、main.js 设置全局变量。

      import { createApp } from \’vue\’
      import App from \’./App.vue\’

      const app = createApp(App);

      /** 定义一个函数,用于对象链式取值 */
      const getObjChainingVal = (obj, keyName) => {
      // …
      return tempObj
      }
      app.config.globalProperties.getObjChainingVal = getObjChainingVal;

      /**定义变量$website,并赋值为devcursor**/
      app.config.globalProperties.$website = \’devcursor\’;

      在其他页面使用的时候

      (1)在模板中使用:

      <template>
      <div>
      作者:{{ getObjChainingVal(data, \’user.info.name\’) }}
      <div>{{ $website }}</div>
      </div>
      </template>

      (2)在语法糖<script setup>里使用:

      <script setup>
      import { getCurrentInstance } from \’vue\’

      const app = getCurrentInstance()
      const website = app.appContext.config.globalProperties.$website
      console.log(website)

      // 或者
      const { proxy } = getCurrentInstance()
      console.log(proxy.$website)

      // 使用解构赋值
      const { $web } = getCurrentInstance()!.appContext.config.globalProperties
      console.log($web)

      /**注意!getCurrentInstance()不能在回调函数、方法里使用**/
      //若要访问全局变量,需在函数外面调用getCurrentInstance()
      const { proxy } = getCurrentInstance()
      //或者
      const name = getCurrentInstance().proxy.$website;
      const getUserInfo=()=>{
      console.log(proxy.$website);
      console.log(name);
      }

      </script>

      (3)组件实例中使用

      <script>
      export default {
      mounted() {
      console.log(this.$website) // \’devcursor\’
      }
      }
      </script>

      2、使用provide定义变量、inject获取变量

      (1)父组件使用provide定义变量

      import {provide} from \”vue\”;

      const data=\’hello Word\’;
      provide(\’data\’,data);

      (2)子组件通过inject获取变量

      import {inject} from \”vue\”;

      const data=inject(\’data\’);
      console.log(data,\’555555555555555555555\’); //输出为:hello Word

      附:定义全局函数Vue2 和 Vue3 的区别

      由于 Vue3 没有 Prototype 属性,所以需要在 main.ts 文件里使用 app.config.globalProperties 去定义全局函数和变量

      Vue2:

      // 之前 (Vue 2.x)
      Vue.prototype.$http = () => {}
      Vue3:
      // 之后 (Vue 3.x)
      const app = createApp({})
      app.config.globalProperties.$http = () => {}
      定义一个全局变量,示例如下:
      app.config.globalProperties.$env = \”dev\”;

      在 Vue3 移除了过滤器,定义一个全局函数代替 Filters,示例如下:

      app.config.globalProperties.$filters = {
      format<T extends any>(str: T): string {
      return `衔蝉-${str}`;
      }
      }

      总结

      到此这篇关于Vue3定义全局变量的方式总结的文章就介绍到这了,更多相关Vue3定义全局变量内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

      您可能感兴趣的文章:

      • vue3中如何实现定义全局变量
      • vue3定义使用全局变量的示例详解

      收藏 (0) 打赏

      感谢您的支持,我会继续努力的!

      打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
      点赞 (0)

      悠久资源 JavaScript Vue3定义全局变量的方式总结(附代码) https://www.u-9.cn/biancheng/javascript/186564.html

      常见问题

      相关文章

      发表评论
      暂无评论
      官方客服团队

      为您解决烦忧 - 24小时在线 专业服务