Vue3常⽤功能及问题
Vue3路由跳转⽅式
vue3.x中路由跳转不能使⽤ this.$router 。引⼊ ctx，使⽤ctx.$router.push()的话，打包后会出现各种各样的报错问题。要这样来：1.⾸先导⼊router.js
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)
在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','⼩明')
在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){
const的作用
state.loadding = load
}
},
actions:{
setloadding(context,load){
contextmit("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.$ 来访问的，但这在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）出去
补充：设置的元素引⽤变量只有在组件挂载后才能访问到，因此在挂载前对元素进⾏操作都是⽆效的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。