Vue调用外部js事件

最新推荐文章于 2024-09-18 21:51:14 发布

半仙code

最新推荐文章于 2024-09-18 21:51:14 发布

阅读量1.2k

点赞数

分类专栏：只要头不秃就要当高级 Vue

本文链接：https://blog.csdn.net/liz9411/article/details/112961294

版权

Vue 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

只要头不秃就要当高级

6 篇文章 0 订阅

订阅专栏

问题描述：

当项目是vue项目时，动态插入一些html/js代码的时候，此时无法交互的原因是此时dom已经加载结束，无法与Vue项目交互

解决思路

强行启动生命周期
将js方法定义成全局js方法

实现过程：

1.强行启动生命周期

varMyComponent=Vue.extend({
    template: '<a style="color:#07bb49;" v-on:click="world('+"'"+id+"'"+')">删除</a>',
    methods:{
         world:function(id) {
                alert(this.data);
          }
    }
});
varcomponent= newMyComponent().$mount();
document.getElementById('edituser').appendChild(component.$el);

2.将js方法定义成全局js方法

1.在index.html中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>

<body>
  <div class="app" id="app"></div>
</body>
<script>
  function sectorDetailClick(ENODEBID, CELL_IDENTITY, SAME_PCI_BID) {
    sectorDetail(ENODEBID, CELL_IDENTITY, SAME_PCI_BID)
  }
</script>
</script>

</html>

2.在组件里

export default {
  data() {
    return {
      }
    },
  created() {
  
  },
  mounted() {
    //绑定全局函数（可以理解为函数监听初始化）
    this.showDetail()
  },
 methods: {
    showDetail() {
      //声明全局函数
      window.sectorDetail = (eid, cid, sid) => {
       //这里写vue调用
      }
    }
}