【解决】Vue引入layer插件后如何使this仍然指向vue对象

最新推荐文章于 2023-03-30 21:20:32 发布

HonourX

最新推荐文章于 2023-03-30 21:20:32 发布

阅读量537

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/weixin_44220068/article/details/105823128

版权

vue引入layer踩坑
本想引用layer中的confirm确认框
按照layui官网介绍的使用npm 安装的方式：npm i layui-src
，并通过 layui.use() 方式来加载该入口文件，任然发现提示layer未定义

下载layer插件成功引入
接着只有下载完整版的layer插件，放在static文件目录下，
再index.html文件中引入全局js和css文件
再项目中就可以使用layer插件了，

插件中this指向问题
在使用中发现在layer对象里面调用this.$htttp.delete方法报错，显示delete未定义，发现this指向不再是vue对象而是layer对象了，故在created中将通过定义的myVue将指向vue对象的this保存起来，接着在layer插件里面就可以使用了。

<script>
import Alert from './Alert'
var myVue = {}
export default {
  name: 'CustomerDetail',
  data () {
    return {
     customer:""
    }
  },
  methods:{
  fn(){
    layer.confirm('确认删除吗？',{icon:3,title:'删除提示'},function(index){
 myVue.$http.delete("http://localhost:3000/users/"+myVue.customer.id).then(function(){
        myVue.$router.push({path:"/",query:{alert:"删除成功！！！"}});})
      layer.close(index);
      });
  },
  },
  created(){
    this.showCluster();
    myVue = this;
  }
 /* beforeCreate(){
    myVue = this;这里赋值也可以
  }*/

}
</script>