app.config.globalProperties 与window
时间: 2024-02-22 11:53:22 浏览: 32
app.config.globalProperties 是 Vue.js 中的一个全局配置对象,它允许我们在 Vue 实例之外访问全局属性或方法。通过将属性或方法添加到 app.config.globalProperties 对象中,我们可以在整个应用程序中访问它们,而不需要每次都导入或注入。
window 是浏览器中的全局对象,它代表了当前浏览器窗口或标签页。window 对象提供了许多属性和方法,用于操作浏览器窗口、处理事件、操作文档等。在前端开发中,我们经常使用 window 对象来获取或设置全局变量、操作浏览器历史记录、执行定时任务等。
相关问题
app.config.globalProperties能被控制台获取么
在浏览器控制台中无法直接获取到`app.config.globalProperties`。因为`app`是Vue.js框架中的实例对象,只有在Vue.js应用程序中才能访问到它。而`config`和`globalProperties`是Vue.js框架中`app`实例的属性,也只能在Vue.js应用程序中访问到。
如果想要在控制台中获取到`app.config.globalProperties`,需要先在Vue.js应用程序中将其挂载到全局变量中,例如:
```javascript
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$myGlobalProperty = 'Hello World!'
app.mount('#app')
```
在这个例子中,我们将一个名为`$myGlobalProperty`的属性挂载到了`app.config.globalProperties`中。如果我们在控制台中输入`window.app.config.globalProperties.$myGlobalProperty`,就可以获取到该属性的值。但是需要注意的是,这种方式并不是推荐的做法,因为将`app`实例挂载到全局变量中会增加全局变量的数量,容易导致命名冲突和不必要的全局污染。
vue3挂载window方法
在Vue 3中,可以通过在`main.js`文件中使用`app.config.globalProperties`属性来挂载全局方法到`window`对象上。具体步骤如下:
1. 在`main.js`文件中,创建一个Vue应用实例:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 全局方法的定义
app.config.globalProperties.$myMethod = function() {
console.log('My global method')
}
// 应用实例的挂载
app.mount('#app')
```
2. 在`app.config.globalProperties`对象上,添加一个以`$`开头的属性。这里我们添加了一个名为`$myMethod`的全局方法。
3. 在组件中,可以通过`this.$myMethod()`来调用该方法。如果需要在全局作用域下调用该方法,则可以使用`window.$myMethod()`。
注意:在Vue 3中,`Vue`对象已经被移除,因此无法使用`Vue.prototype`来挂载全局方法。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)