vue中将html字符串转换成html后遇到的问题小结

今天整理之前做vue项目时遇到的一些问题，发现了当时遇到的一个很小但是又会引出很多问题的一个问题（总之就是很有意思，听我慢慢给你到来），这个问题就是当时处理后端数据时，如何将后端返回来的字符串转换成html标签，其实根据vue官网的一个v-html方法是不是觉得很简单，当时我也是这样想的，可是我发现了几个问题(官网给出的动态渲染任意 HTML 容易导致 XSS 攻击的问题我就不说了，在这里我只是用它来渲染数据)：

　　第一，当我用v-html将后端字符串转换成了html标签后，发现我在那个字符串中解析出来的html里面设置的样式没有加上；

　　第二，当我们使用v-html的时候，是会自动生成一个div标签的，有时候这个小小的div标签可能会影响到我们的布局，这个时候你会想到用template来替代div不就完事了，可是很不幸，给出我试验后的结果让你看看吧

<div v-html="'<p>渴望成为大牛的男人</p>'"></div>　　　　　　　　　　　　　　//页面上成功渲染出了我们想要的p标签，但同时它的外围也被一个div标签包裹着
<template v-html="'<p>渴望成为大牛的男人</p>'"></template>　　　　　　　　//页面上并没有出现我们想要的这个p标签

　　   有没有发现一个小小的需求就会带来很多意想不到的问题，让我不禁感叹，代码的世界真的是神奇啊，废话不多说，接下来我给出这两个问题的解法

我们先来解决第一个问题：

　   解决这个问题的开始，我们要先了解一下scoped，在vue中，当你在一个style标签上加了scoped属性时，这个style标签内的样式将会被锁死在当前这个组件内，为的就是避免我们的样式出现混乱，假如说你的项目中如果每个style标签上都加了scroped这个属性，从某种意义上说就相当于实现了样式的模块化。

　　为什么我要说scoped这个属性，因为在你加了scroped之后，当你引用一些第三方组件，比如swiper，当你想要去覆盖它的样式的时候，你会发现覆盖不了，那么我们后来通过v-html引入的html元素肯定也逃不掉，这个时候我们可以通过一种特殊的方式，穿透scoped，比如这样：

<style scoped>
  >>>需要穿透的类名 {
    样式
  }
</style>

　　嗯对，就是这个姿势，我们使用>>>就可以实现一个穿透效果，让我们在使用scoped的情况下，去修改其他组件的样式，还有另外一种方法就是你可以把需要穿透的样式写到另一个style标签中，不加scoped，这样也可以，看你个人需求。

接下来我们解决第二个问题，同时我们把这个问题转化为如何将一个html字符串转换为html元素：

　　 在这里我们可以想将一个html字符串转换为html元素的话，我想到的办法就只能进行DOM操作了，在vue中，要进行DOM操作的话，我们可以使用自定义指令，如果有小伙伴对自定义指令不了解的话，可以去vue的官方文档先看下自定义指令是什么，官网链接：https://cn.vuejs.org/v2/guide/custom-directive.html　　　　

　　解决这个问题的大致思路是这样的：我们可以在要加入这个html字符串的元素绑定一个自定义指令，我们在data中定义一个htmlStr变量用来存储字符串，绑定到我们的自定义指令上，然后在我们这个自定义指令中我们可以获取到这个当前这个元素的dom节点还有我们需要解析的字符串，我们通过原生js的innerHtml方法将字符串渲染到页面上即可：

data(){
    return {
      htmlStr:'<p>渴望成为大牛的男人</p>'   //你可以把后端html字符串数据来赋值给htmlStr
    }
  },
<main v-exchangeHtml:foo='htmlStr'>   //定义自定义指令
//全局注册自定义指令
Vue.directive('exchangeHtml',{   
  bind: function(el,foo){
   console.log(el,foo)
   el.innerHTML += foo.value
 }
})

我把el和foo打印出来，以便大家理解，这是打印出来的结果

自此，我们就完成了直接将html字符串转换成我们需要的html元素并且添加了进来

总结