Vue 之 解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法

一、简介

官方文档：

通过上面官方文档的介绍我们可以得知两个重点：

① 通过v-html生成的页面元素，不会被当做Vue模板进行编译，只会作为普通的html代码被插入，也就是说通过v-html插入的html代码中，如果包含vue的语法，例如：@click、v-if等，则不会生效，因为他们没有被Vue编译，而浏览器并不会识别这些vue语法，所以这些语法都不生效。

② 在.vue文件中如果style标签上增加了scoped属性，那么该标签内的样式就不会对v-html生成的页面元素起作用，还是因为这些元素没有被当做Vue模板进行编译，所以不生效。

如果在某些业务场景下我们给v-html生成的页面元素绑定了@click事件，需要触发某些处理方法，或者需要给这些元素设置CSS样式时，这两个问题就比较致命了，所以我们要想办法去解决这俩问题。

解决绑定事件失效方法有：使用onclick等原生事件代替@click等事件vue事件、利用事件委托触发事件、使用component模板代替v-html。

解决样式不生效的方法有：/deep/、::v-deep、>>> 、:deep、额外的全局