首页vue3和vue2的创建全局方法

vue3和vue2的创建全局方法

时间: 2023-12-07 16:39:40 浏览: 151

vue2 全局变量的设置方法

5星 · 资源好评率100%

Vue2 全局变量的设置方法 Vue2 中设置全局变量有两种方法：全局变量专用模块和全局变量模块挂载到 Vue.prototype 里。 1. 全局变量专用模块全局变量专用模块是以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块便好。例如，我们可以创建一个名为 Global.vue 的模块： ```javascript <script type="text/javascript"> const colorList = [ /* 一些颜色值 */ ] const colorListLength = 20 function getRandColor () { var tem = Math.round(Math.random() * colorListLength) return colorList[tem] } export default { colorList, colorListLength, getRandColor } </script> ``` 在需要使用全局变量的模块中，我们可以导入该模块： ```javascript import global_ from 'components/tool/Global' export default { data () { return { getColor: global_.getRandColor, mainList: [ /* 一些数据 */ ] } } } ``` 2. 全局变量模块挂载到 Vue.prototype 里全局变量模块挂载到 Vue.prototype 里，可以使得全局变量在所有组件中都可以访问。例如，我们可以在 main.js 中添加以下代码： ```javascript import global_ from './components/tool/Global' Vue.prototype.GLOBAL = global_ ``` 这样，在需要引用全局量的模块处，不需再导入全局量模块，直接用 `this` 就可以引用了： ```javascript export default { data () { return { getColor: this.GLOBAL.getRandColor, mainList: [ /* 一些数据 */ ] } } } ``` 这两种方法都可以实现全局变量的设置，但是在选择时需要考虑到项目的需求和架构。

以下是Vue2和Vue3创建全局方法的两种方式： Vue2创建全局方法： 1.在main.js中导入Vue和组件 ```javascript import Vue from 'vue' import header from "@/components/header.vue" ``` 2.使用Vue.component()方法注册组件 ```javascript Vue.component("header", header) ``` Vue3创建全局方法： 1.在main.js中导入createApp和组件 ```javascript import { createApp } from 'vue' import header from "@/components/header.vue" ``` 2.使用createApp().component()方法注册组件 ```javascript const app = createApp({}) app.component("header", header) ```

阅读全文