VUE的click事件在html中可能失效的问题解决方法

约定不等于承诺〃 2022-11-21 01:05 586阅读 0赞

VUE作为一种视图模型的解决方案，不同于jquery的对dom结构处理的解决方案。vue组件在项目中运用时，按常规控件（比如标签@click）的使用方法都能正常执行，可能有时也会遇到各种问题。比如html页面中控件是可能需要动态生成的，那么直接使用标签@click的字符串来拼接html生成页面，页面是不能正常解析标签@click的，我们看到vue项目的“标签@click“，在最后页面实际展现后，是看不到"@click"，是因为VUE容器加载后，来解析这个控件的click事件相应的。那么我们如何处理这种情况呢。

我们先来看看，用常规js标签替换click的解决方法。关于vue组件的js引用文件就不用多说了，直接上代码。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="vue.min.js"></script>
    <title>Vue 测试实例 - </title>
    
    
    </head>
    <body>
    <button onclick="add_data()">aaa</button>
    <div id="app">
      <p>{
       { message }}</p>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      created: function () {
    	  let _this=this;
    	  window.add_data=_this.add_data;
        },
     methods: {
       add_data:function(){
    	  alert(222);
       }
       
     }  
    })
    </script>
    </body>
    </html>

我们看到，js直接调用add\_data方法，而不是通过@click标签，然后的重点代码是

![20201029100410988.png][]

这句话的意思是，在vue的构造事件中，将window对象的add\_data 方法等同于VUE的add\_data，这样就可以解决动态调用生成html不能解析@click标签的问题。

接下来的我们生成动态构造html就比较简单了，直接构造“<button οnclick="add\_data()">aaa</button>”字符串生成html，vue组件方法也能够正常解析了。

[20201029100410988.png]: /images/20221120/b72cb9611ab84d679e3862ca9b9f6bfa.png