vue3中Vue.prototype的替代方案

阅读数:171 评论数:0

分类

html/css/js

正文

方案一：

使用app.config.globalProperties.

// 初始化相关
import { createApp } from 'vue'
import { nextTick } from "@vue/runtime-core"
import App from './App.vue'
import router from './router'
import store from './store'

// 创建对象
const app = createApp(App)
// 必须使用 nextTick，不然会有加载顺序问题，导致绑定失败
nextTick(() => {
  // 代替 Vue.prototype.$xxx 绑定
  app.config.globalProperties.$dzm = 'dzm-test'
})
// 使用并挂载
app.use(store).use(router).mount('#app')
// 导出
export default app

<script>
// js 中使用方式
import { getCurrentInstance } from 'vue'
export default {
  setup () {
    const { proxy } = getCurrentInstance()
    console.log(proxy.$dzm)
  }
}
</script>

<!-- 模版中使用 -->
<span>{{ $dzm }}</span>

方案二：

直接使用provide inject

vue2与vue3对比

一、生命周期 1、vue2生命周期 beforeCreate #实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用 created #实例创建完成后被立即同步调用 beforeMount #

vite+vue3+pinia+pnpm+element-plus开发记录

一、使用pnpm新建项目可以使用npm 或yarn或pnpm来初始化Vite项目 pnpm create vite xxx(项目名称) #选择vue #选择js cd xxx (进入项目目录) #安

vue3 setup语法糖

一、概述 <script setup> 是在单文件组件（SFC）中使用组合式API的编译时语法糖，解决Vue3.0中setup需要频繁将声明的变量、函数以及import引入的内容通过return向外

vue3中的ref、computed、reactive、toRef、toRefs

一、概述在vue2中，data函数里返回的值直接为响应式，但在vue3中我们需要使用一些函数才能达到这个效果。 setup函数中拿不到vue的this。二、常用函数 <template> <d

vue3使用setup代替created

vue3中vue router4下使用keep-alive

缓存页面主要Jul为了防止重复渲染dom，减少加载时间及性能消耗，提高用户体验。一、旧版的语法 <keep-alive> <router-view v-if="$route.meta.kee

vue3中全局挂载和获取的方式

一、在main.js挂载 import { createApp } from 'vue' import App from './App.vue' import router from './route

vue3中使用$refs

一、概述在vue3中没有$refs这个对象，可以使用如下方法 <template> <div><input type="text" ref="txt1" value="hello" /></div>

vue3中使用element plus 的ElMessage

方式一、全局引入全局引入element之后事，element已经在app.config.globalProperties添加了全局方法$message，所以可以在组件中直接使用。方式二、按需引入

vue3中的useRoute和useRouter

一、useRouter传参的方式 1、隐匿传参params import { useRouter } from 'vue-router' export default { setup() {

秒吧学习