setup中使用 element-ui 的 Message弹框；setup中 间接使用 this的方法

目录

一、问题

二、解决方法

三、总结

---

一、问题

1.vue在全局引入 ElementUI，在选项式api中直接使用 this.$message({type:'success',message:'test message")就可以了，但是组合式api setup中不可以直接使用this.该如何在setup中使用 message组件呢？

二、解决方法

1.每次使用的时候直接引入 Message：import { Message } from 'element-ui';直接调用Message方法即可。

缺点：每次都引入有些麻烦

import { defineComponent } from 'vue'
import { Message } from 'element-ui';

export default defineComponent({
    setup() {
        onMounted(()=>{
            testFunc()
        })
        const testFunc=()=>{
            Message({
                type:'success',
                message:'test message'
            })
        }
    },
})
</script>

2.vue中全局引入 ElementUI； 定义一个全局变量_this,在mounted中赋值_this=this,_this就是 this的引用，虽然setup中不可以直接使用this,但是可以使用_this。

注：因为_this是this的引用,所以可以直接使用 _this调用 this上挂载的方法。

_this.$message({type:'success',message:'test message'});

1）全局引用ElementUI

import ElementUI from 'element-ui';
Vue.use(ElementUI);

2)使用

<script >
import { defineComponent } from "vue";
// import { Message } from 'element-ui';

// 声明一个全局变量 _this
let _this = this;
export default defineComponent({
  mounted() {
    //   赋值 : _this是 this的引用
    _this = this;
  },
  setup() {
    onMounted(() => {
      testFunc();
    });
    const testFunc = () => {
      // Message({
      //     type:'success',
      //     message:'test message'
      // })

    //   使用
      _this.$message({
        type: "success",
        message: "test message",
      });
    };
  },
});
</script>

三、总结

1.直接引入Message;每次使用都引入，比较麻烦。

2.定义全局变量_this,mounted中赋值为this,引用this,间接在setup中使用this

/*

希望对你帮助！

如有错误，欢迎指正，非常感谢！

*/