Vue中動態拼接innerHTML時添加點擊事件，並在點擊事件中調用vue方法

場景

在VUE頁面中動態生成某個彈窗的innerHTML的內容。

內容中添加一個button，並設置Button的點擊事件，

在點擊事件中能調用vue的方法。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

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){

        },
   }