markdown-it 怎样解析特殊字符串 渲染为vue组件

[wangxiangyao]

已经能解析特殊字符串，但是怎么渲染成vue 组件呢？

[wangxiangyao]

我想了想，有个思路： 前端就不引用编辑器了，用markdown-it解析成html后，然后模板字符串的形式，直接填进去。不知道这样行不行

// article.js
import hello from './hello' // 引入hello
import markdownIt from 'markdown-it'

export default {
  template: `<div>{{ temp }}</div>`,
  data () {
    return {
      temp: '',
    }
  },
  components: {
    hello
  },
  created () {
    fetch('/article/1')
    .then((res) => {
      this.temp = markdownIt.render(res.data) // 用markdownIt解析一下，变成模板，里边有hello组件
    })
  }
  ....
}

[CHENXCHEN]

这样是可以的，事实上mavon-editor的解析部分就是这么做的 你需要使用 v-html指令

[wangxiangyao]

可是v-html不能当做模板用啊，想渲染组件，貌似是走不通的

[CHENXCHEN]

我现在才明白你所描述的问题。。这样看来是不行的

[wangxiangyao]

整这个好久了，貌似没有实现的方法，需要写解析函数，解析成vue组件，就跟markdown-it的parse。好难啊。听说ng有直接导入生成组件的方法

[Superb-x]

@wangxiangyao 你可以试试用Vue的compile方法，https://cn.vuejs.org/v2/api/#Vue-compile

[xlzy520]

@wangxiangyao 去看vuepress的vue-markdown-loader，你可以用vuepress的方式渲染vue组件