Resumen de preguntas frecuentes de Vue3
Breve introducción: vue3 beta ha estado disponible por un tiempo, y recientemente tuve tiempo para practicar con las manos. Los problemas encontrados durante la práctica se resumen a continuación
Este artículo dirección de origen de github
A continuación se muestra el problema
Cómo registrar componentes globales en vue3
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 注册全局组件
import SaveButton from '@/globalComponents/SaveButton'
app.component('SaveButton', SaveButton)
app.mount('#app')
Cómo registrar directivas personalizadas globales en vue3
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 注册全局自定义指令 `v-focus`
app.directive('focus', {
inserted: function (el) {
el.focus()
},
})
app.mount('#app')
Cómo mezclar vue3 globalmente
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 全局混入
app.mixin({
beforeCreate() {
console.log('我是全局mixin')
},
})
app.mount('#app')
Cómo montar propiedades y métodos globales globalmente en vue3
import {
createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
const app = createApp(App)
// 全局ctx(this) 上挂载 $axios
app.config.globalProperties.$axios = axios
app.mount('#app')
Cómo registrar complementos para vue3
import {
createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 注册插件
class plugin {
static install(_vue) {
// 混入
_vue.mixin({
beforeCreate() {
console.log('我是plugin')
},
})
}
}
app.use(plugin)
app.mount('#app')
Filtro de filtro de registro global Vue3
Jaja, parece que vue 3 ha abandonado el filtro y no se puede registrar temporalmente
Cómo obtener $ router y $ route de vue-router en la función de configuración de vue3
Los dos métodos siguientes son factibles (pasar getCurrentInstanceo useRoute, useRouter).
import {
getCurrentInstance, unref } from 'vue'
import {
useRoute, useRouter } from 'vue-router'
export default {
export default {
setup() {
// 拿到当前组件 this(ctx)
const {
ctx } = getCurrentInstance()
// 拿到 $router
// const $router = useRouter()
const $router = ctx.$router
// 拿到 $route
// const $route = useRoute()
const $route = unref(ctx.$router.currentRoute)
}
}
Cómo obtener $ store de vuex en la función de configuración de vue3
Los siguientes dos métodos son factibles (pasar getCurrentInstanceo useStore).
import {
getCurrentInstance, onMounted } from 'vue'
import {
useStore } from 'vuex'
export default {
setup() {
// 拿到当前组件 this(ctx)
const {
ctx } = getCurrentInstance()
// console.log(ctx.$store)
// 在这里这样是拿不到的，因为$store在beforeCreate生命周期里注入，而setup函数在beforeCreate之前执行
// 此链接的文章里有介绍 https://blog.csdn.net/qq_39953537/article/details/105703894
// const $store = useStore()
onMounted(() => {
console.log(ctx.$store)
})
},
}
Link de referencia