Vue中动态拼接innerHTML时添加点击事件，并在点击事件中调用vue方法

场景

在VUE页面中动态生成某个弹窗的innerHTML的内容。

内容中添加一个button，并设置Button的点击事件，

在点击事件中能调用vue的方法。

注：

博客： 霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、innerHTML的内容如下

str =`
                                            <div class="car_detail">
                                                <div class="car_detail_header">
                                                    <p>驾驶员：${content.drivername? content.drivername: ""}</p>
                                                    <p>车牌号：${content.carNumber ? content.carNumber : ""}</p>
                                                    <p>
                                                        <button  onclick="previewNvrVideo(1)">1号摄像头</button>
                                                    </p>
                                             `

添加的button并设置了点击事件previewNvrVideo还传递了参数。

2、那么这个点击时的方法应该在哪里声明才能在该方法中调用vue中methods中的方法

在mounted函数中

mounted() {
        let self = this;
        //模板参数传参
        const _this = this
        window.previewNvrVideo = function (channelNum) {
            _this.nvrPreview(channelNum);
        }

    },

3、然后就可以再Vue页面中调用methods中的nvrPreview方法了

methods: {
        nvrPreview(channelNum){

        },
   }