javascript - v-html 中的 Vue 组件/元素

Question

我有一个 post.text 数据，其中包含用户提交的博客文章的文本 就像在 Twitter 中一样，用户可以使用语法 提及其他用户，我正在标记 @user1在这篇文章中。呈现帖子时，我想用指向所提及用户页面的链接替换所有 @username 实例。

通过正则表达式匹配/替换，我可以轻松地将提到的 @username 转换成类似的东西(我正在使用 vue-router):

I am tagging <router-link :to="{name: 'user', params: {userId: post.userId}}">{{ dPost.user_name }}</router-link> in this post

但是当我这样使用它时:

<p v-html="preparedText"></p>

vue 不会重新处理 html 来绑定(bind)它自己的标签。

如何解决这个问题？谢谢

Answer 1

你想做的事情有点打破了正常的 Vue 范式，但它可以使用 Vue.compile 来完成。 .您需要使用 Vue.compile 生成渲染函数，然后手动创建一个新的 Vue 实例安装组件后。

这是一个例子:

Vue.component('post', {
  template: `<div></div>`,
  props: { text: String },
  mounted() {
    let regex = /\B\@([\w\-]+)/gim;
    let username = this.text.match(regex)[0];
    let linkText = this.text.replace(regex, `<a href="#">${username}</a>`);
    let res = Vue.compile(`<p>${linkText}</p>`);
    
    let { render, staticRenderFns } = res;
    new Vue({ el: this.$el, render, staticRenderFns })
  }
})

new Vue({
  el: '#app',
  data() {
    return { text: `Hi @user1, how are you?` }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <post :text="text"></post>
</div>