为v-html渲染出的内容添加样式无效

参考 VUE 爬坑之旅-- 给 v-html渲染出的内容添加样式

简单来说,只需在样式选择器中用穿透符>>>,就可以让样式生效了.

<template>
    <div v-html="article.content" class="fmt"></div>
</tempalte>

<style scoped>
    .fmt {
        font-family: "Helvetica Neue",Helvetica,"PingFang SC",
        "Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        -webkit-tap-highlight-color: transparent;
        color: #606266;
    }

    .fmt >>> h1,h2,h3 {
        font-family: inherit;
        color: #303133;
        font-weight: 500;
        line-height: 1.7em;
        margin-top: 20px;
     }
</style>

父组件异步请求数据传给子组件,子组件接收不到.

参考Vue异步请求数据和nextTick

因为异步加载的原因,在数据还没有请求到的时候,组件就已经生成了.这个时候当然子组件当然获取不到数据而报错.这个时候,只需要利用v-if的特性,当得到的数据为空时,不渲染组件.等到数据加载成功,再进行渲染,就避免了报错的问题.借此还可以实现加载中的界面效果.

<template>
  <div>
    <div v-if="article">
        <!--具体内容省略-->
    <div>
  </div>
</template>

<script>
  export default {
    props: ["article"],
  }
</script>