Vue中如何给动态生成的元素绑定点击事件

  原生的JS中给元素绑定点击事件是通过操作DOM，获取到这个元素，然后通过addEventListener来绑定点击事件，在Vue中不推荐操作DOM的这种方式，由于是动态生成的元素通过@click是没有效果的，那么有什么方式可以实现相同效果呢？

/** 这里利用了事件总线，代码如下：*/

const install = function (Vue) {

         const Bus = new Vue({

         methods: {

                  emit (event, ...args) {

                  this.$emit(event, ...args);

          },

            on (event, callback) {

                   this.$on(event, callback);

            },

            off (event, callback) {

                  this.$off(event, callback);

            }

        }

    });

    Vue.prototype.$bus = Bus;

    window.window$BUS = (event, ...args) => {        //主要代码

            Bus.$emit(event, ...args);

    };

};

Date.prototype.Format = function (fmt) {

        var o = {

              "y+": this.getFullYear(),                //年

              "M+": this.getMonth() + 1,                 //月份

              "d+": this.getDate(),                    //日

              "h+": this.getHours(),                   //小时

             "m+": this.getMinutes(),                 //分

             "s+": this.getSeconds(),                 //秒

             "q+": Math.floor((this.getMonth() + 3) / 3), //季度

             "S": this.getMilliseconds()             //毫秒

       };

    if (/(y+)/.test(fmt)) {

        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

    }

    for (var k in o) {

        if (new RegExp("(" + k + ")").test(fmt)) {

            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

        }

    }

    return fmt;

};

String.prototype.splice = function(start, newStr) {

    return this.slice(0, start) + newStr + this.slice(start);

};

export default install;

在window 对象上定义了一个方法，名为window$BUS，这个方法接收两个参数，第一个就是事件对象，第二个是一个...args意思是允许我们传多个参数。

定义好后使用方法如下：

  let str = '<div class="layerInformation-title">事件详情</div>' +

          '<div style="width: calc(100% - 20px);height: 200px;padding: 10px;">' +

          '<img src="'+ url +'" style="width: 100%;height: 100%;cursor:pointer;" οnclick="window$BUS(\'enlargePicture\',\'' + dataStr + '\')" />' +

          '</div>' +

          '<div class="layerInformation" style="width:460px;">' +

          '<span style="width: 50%;float: left;">所属单位：' + data.deptName + '</span>' +

          '<span style="width: 50%;float: left;">处理人：' + (data.conductor || '') + '</span>' +

          '<span style="width: 50%;float: left;">事件状态：' + this.treatmentFormatter({}, {}, data.treatmentState) + '</span>' +

          '<span style="width: 50%;float: left;">事件名称：' + data.eventName + '</span>' +

          '<span style="width: 50%;float: left;">事件类型：' + this.eventTypeFormatter({}, {}, data.eventType) + '</span>' +

          '<span style="width: 50%;float: left;">事件等级：' + this.eventGradeFormatter({}, {}, data.eventGrade) + '</span>' +

          '<span style="width: 50%;float: left;">经度：' + data.longitude + '</span>' +

          '<span style="width: 50%;float: left;">纬度：' + data.latitude + '</span>' +

          '<span style="width: 50%;float: left;">采集地点：' + data.gatheringPlaceName + '</span>' +

          '<span style="width: 50%;float: left;">上报人员：' + data.reportPersonnel + '</span>' +

          '<span style="width: 50%;float: left;">上报时间：' + data.reportTime + '</span>' +

          '<span style="width: 100%;float: left;">事件描述：' + data.incidentDescription + '</span>'

          '</div>'

这里通过onclick点击事件来触发 window$BUS方法，并且抛出事件对象，最后执行Bus.$emit(event, ...args)，所以我们需要通过 this.$bus.on('enlargePicture', (odata)=>{let data = JSON.parse(decodeURI(odata));}）来监听抛出的数据；

/**注意事项*/

这里直接获取的odata 是通过utf-8编码后的数据，需要通过decodeURI来进行解析，得到的是一个字符串对象，使用JSON.parse转成对象；