搜索到
1
篇与
的结果
-
vue3中使用getCurrentInstance来代替this vue3中使用getCurrentInstance来代替this概念在 vue2 版本中，可以通过 this 来获取当前组件实例，但是在 vue3 setup 中是无法通过 this 获取组件实例对象，console.log(this) 打印出来的值是undefined。而使用 getCurrentInstance 方法就能获取当前组件的实例、上下文来操作 router 和 vuex 等。使用例子一：<script setup> import { getCurrentInstance, ref } from "vue";// 获取当前实例，在当前实例充当vue2 中的this // 获取当前组件实例 const instance = getCurrentInstance(); // 获取当前组件的上下文，下面两种方式都能获取到组件的上下文。 const { ctx } = getCurrentInstance(); // 方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到 const { proxy } = getCurrentInstance(); // 方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐） // 确定更多筛选 const onSureMoreScreen = () => { // 隐藏更多筛选 instance.proxy.$refs.sureScreen.toggle(); //proxy.$refs.sureScreen.toggle(); //该方式作用和上面的一样 } </script>例子二：1.// 在新的vue-router里面尤大加入了一些方法，比如这里代替this的useRouter，具体使用如下： //引入路由函数 import { useRouter } from "vue-router"; //使用 setup() { //初始化路由 const router = useRouter(); router.push({ path: "/" }); return {}; } 2.在vue2中可以通过this来访问到$refs，vue3中由于没有this所以获取不到了，但是官网中提供了方法来获取: <template> <h2 ref="root">姓名</h2> </template> <script> import { onMounted, ref } from 'vue' export default { name: 'test9', setup(){ const root = ref(null) onMounted(()=>{ console.log(root.value); }) return { root } }, } </script> //第二种方法，也可以通过getCurrentInstance来获取 <template> <h2 ref="root">姓名</h2> </template> <script> import { onMounted, ref, getCurrentInstance } from 'vue' export default { name: 'test9', setup(){) const {proxy} = getCurrentInstance() onMounted(()=>{ console.log(proxy.$refs.root); }) return { } }, } </script> 3.关于element在vue3的使用方法，没有this.$message等方法解决方案 <template> <button @click="doLogin">登录</button> </template> <script> import { getCurrentInstance } from 'vue' export default { name: 'Test', setup () { const instance = getCurrentInstance() // vue3提供的方法，创建类似于this的实例 const doLogin = () => { instance.proxy.$message({ type: 'error', text: '登录失败' }) // 类似于this.$message() } return { doLogin } }, // 如果想试用this.$message，须在mounted钩子函数中，setup中没有this实例， //但vue3.0中还是建议在setup函数中进行逻辑操作 mounted () { this.$message({ type: 'error', text: '登录失败' }) } } </script>注意1、getCurrentInstance 只能在 setup 或生命周期钩子中使用2、ctx 和 proxy 都是 getCurrentInstance() 对象中的属性，通过解构赋值的方式拿到。可以看到，2者有所区别。ctx 是普通对象，proxy 是 Proxy 对象。3、getCurrentInstance 是一个 function 方法，getCurrentInstance() 是一个对象，proxy 也是一个对象。proxy 是 getCurrentInstance() 对象中的一个属性，通过对象的解构赋值方式拿到 proxy。参考：vue3中使用 getCurrentInstance - 掘金 (juejin.cn)解决vue3没有this造成的无法使用vue2_vue3 this-CSDN博客
