Vue3路由跳转方式
vue3.x中路由跳转不能使用 this.$router
。引入 ctx,使用ctx.$router.push()的话,打包后会出现各种各样的报错问题。要这样来:
1.首先导入router.js
2.router.push实现跳转
Vue3使用 this(即ctx)
我们都知道在Vue2的任何一个组件中想要获取当前组件的实例可以通过this
来得到,而在Vue3中我们大量的代码都在 setup 函数中运行,并且在该函数中 this 指向的是 undefined
,那么该如何获取到当前组件的实例呢?
这时可以用到另一个方法,即 getCurrentInstance
在main.ts中
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.name = 'xiaoming'
app.mount('#app')
在HelloWorld.vue中
<script>
import {ref, getCurrentInstance,onMounted} from 'vue'
export default {
setup(){
const { ctx } = getCurrentInstance();
// 在ts中直接使用 const { ctx }=getCurrentInstance().可能会报 Property 'ctx' does not exist on type 'ComponentInternalInstance | null'. 的错误. 可以这样解决: const { ctx } = (getCurrentInstance() as any);
onMounted(()=>{
console.log('ctx',ctx.name); // xiaoming
})
}}
</script>
vue3中使用全局变量(vue2x中的Vue.prototype)
既 provide/inject
在main.ts中
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.provide('name','小明')
app.mount('#app')
在HelloWorld.vue中
import {onMounted,inject} from 'vue'
setup(){
const name = inject('name')
onMounted(()=>{
console.log('name',name); // 小明
})
}
vue3文件里使用 Vuex(useStore)
在Vue2中使用 Vuex,我们都是通过 this.$store
来与获取到Vuex实例,但上一部分说了原本Vue2中的 this
的获取方式不一样了,并且我们在Vue3的 getCurrentInstance().ctx 中也没有发现 $store 这个属性,那么如何获取到Vuex实例呢?这就要通过 vuex 中的一个方法了,即 useStore
在store.ts中 定义
import { createStore } from 'vuex'
interface State {
loadding: boolean;
[propName: string]: any;
}
export default createStore({
state : {
loadding: false as boolean,
name:'小明'
},
mutations: {
showloadding(state, load) {
state.loadding = load
}
},
actions: {
setloadding(context,load){
context.commit("showloadding",load);
}
},
getters: {
isloading:(state)=>{
return state.loadding
}
},
})
在HelloWorld.vue中
<script>
// 从 vuex 中导入 useStore 方法
import {useStore} from 'vuex'
export default {
setup() {
// 获取 vuex 实例
const store = useStore()
console.log(store)//打印结果如下
}
}
</script>
vue3 获取标签元素
在Vue2中,我们获取元素都是通过给元素一个 ref 属性,然后通过 this.$refs.xx 来访问的,但这在Vue3中已经不再适用了。vue3 可以使用 ref 另外的作用,那就是可以获取到标签元素或组件。
<template>
<div>
<div ref="el">div元素1</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
// 创建一个DOM引用,名称必须与元素的ref属性名相同
const el = ref(null)
// 在挂载后才能通过 el 获取到目标元素
onMounted(() => {
el.value.innerHTML = '内容被修改'
})
// 把创建的引用 return 出去
return {el}
}
}
</script>
获取元素的操作一共分为以下几个步骤:
1.先给目标元素的 ref 属性设置一个值,假设为 el。
2.然后在 setup 函数中调用 ref 函数,值为 null,并赋值给变量 el,这里要注意,该变量名必须与我们给元素设置的 ref 属性名相同。
3.把对元素的引用变量 el 返回(return)出去
补充:设置的元素引用变量只有在组件挂载后才能访问到,因此在挂载前对元素进行操作都是无效的