VUE动态刷新（重新加载）特定组件，自定义全局方法

最新推荐文章于 2024-07-11 08:58:44 发布

搬砖的小编

最新推荐文章于 2024-07-11 08:58:44 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_46472377/article/details/120570258

版权

vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本文档介绍了如何从Vue2过渡到Vue3时，正确设置和使用全局实用程序方法。在Vue2中，我们通过挂载到原型上实现，而在Vue3中，需要利用`app.config.globalProperties`来设置。现在可以轻松地在组件模板和方法中调用这些工具方法，例如`$utils.copyToClipboard()`。

摘要由CSDN通过智能技术生成

<template>
  <component-to-re-render :key="reloadMe" />
</template>

<script>
export default { 
  data() { 
    return { 
      reloadMe: 0, 
    }
  }; 

  methods: { 
    forceRerender() { this.reloadMe += 1; } 
  } 
}
</script>

Vue2 中自定义

// Utils
import Utils from './utils/utils.js'

// Init Global Utils
Vue.prototype.$utils = Utils

在 Vue3 中

// Utils
import Utils from './utils/utils.js'   // <-- import file
const app = createApp(App)
 // Init Global Utils
 app.config.globalProperties.$utils = Utils   // <-- set globally
app.mount('#app')
现在我们可以通过简单地使用以下内容在任何地方访问我们的实用程序方法：

// In template
$utils.copyToClipboard(text)
// In methods
this.$utils.copyToClipboard(text)

搬砖的小编

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE动态刷新（重新加载）特定组件，自定义全局方法

<template> <component-to-re-render :key="reloadMe" /></template><script>export default { data() { return { reloadMe: 0, } }; methods: { forceRerender() { this.reloadMe += 1; } } }</script
复制链接

扫一扫