Vue-从字符串中渲染元素

Question

我想从数据库中的字符串创建一个vue元素。

在这种情况下，它应该是带有笑脸表情符号的消息。我实际上将其保存为：Some text with Emoji: :santa::skin-tone-3:，然后将'::'之间的所有有效字符串替换为<Emoji emoji=':santa::skin-tone-3:' :size='16' />

<template>
  <span class=message v-html=convertedMessage></div>
</template>

<script>
  import { Emoji } from 'emoji-mart-vue'

  export default {
    components: {
      Emoji
    },
    computed:{
      convertedMessage(){
        return "Some text with Emoji: "+"<Emoji emoji=':santa::skin-tone-3:' :size='16' />"
      }
    }
  }
</script>

但是代替呈现的元素应该是这样的：

<span data-v-7f853594="" style="display: inline-block; width: 32px; height: 32px; background-image: url(&quot;https://unpkg.com/emoji-datasource-apple@4.0.4/img/apple/sheets/64.png&quot;); background-size: 5200%; background-position: 15.6863% 41.1765%;"></span>

我只会得到：

<emoji emoji=":santa::skin-tone-3:" :size="16"></emoji>

将此元素呈现为预期状态的最佳可能性是什么？

Answer 1

这里有一些更简单的方法来做你通常想要的。如果您提供更多细节，您的正确方向可能是这些解决方案之一之前的策略模式，但这些解决方案之一可能是您想要的：

1) Vue 让你可以动态定义开箱即用的组件，所以这行代码：

<component v-for="(component, index) in components" :key="'component'+index" :is="component.name" v-bind="component.props" />

...会在这样的对象数组中绘制一堆组件（例如）：{name: 'myComponentName', props: {foo: 1, bar: 'baz'}}。

2) Vue 让你只需添加 v-html="variable" 就可以将 HTML 注入到组件中

例如，这里有一个创建动态 SVG 图标的组件，其中 SVG 的内容是从 JavaScript 变量动态注入的......

<template>
  <svg xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    viewBox="0 0 18 18"
    :aria-labelledby="name"
    role="presentation"
  >
    <title :id="name" lang="en">{{name}} icon</title>
    <g :fill="color" v-html="path">
    </g>
  </svg>
</template>

<script>
import icons from '../common/icons'
export default {
  props: {
    name: {
      type: String,
      default: 'box'
    },
    width: {
      type: [Number, String],
      default: 18
    },
    height: {
      type: [Number, String],
      default: 18
    },
    color: {
      type: String,
      default: 'currentColor'
    }
  },
  data () {
    return {
      path: icons[this.name]
    }
  },
  created () {
    console.log(icons)
  }
}
</script>

<style scoped>
  svg {
    display: inline-block;
    vertical-align: baseline;
    margin-bottom: -2px;
  }
</style>

3）Vue 让你通过 this.$options.template 动态定义你的组件模板：

export default {
  props: ['name', 'props'],
  template:  '',
  created(){
    this.$options.template = `<component :is="name" ${props.join(' ')} ></component>`
  },
}

4) Vue 允许您定义渲染函数，因此代理组件或其他高级恶作剧是微不足道的：

Vue.component('component-proxy', {
  props: {
    name: {
      type: String,
      required: true
    },
    props: {
      type: Object,
      default: () => {}
    }
  },
  render(h) {
    // Note the h function can render anything, like h('div') works too.
    // the JS object that follows can contain anything like on, class, or more elements
    return h(this.name, {
      attrs: this.props
    });
  }
});

一个聪明的天才在这里为此写了一个 jsbin：http ://jsbin.com/fifatod/5/edit?html,js,output

5) Vue 允许您使用 Vue.extend 创建组件，甚至将原始 JavaScript 对象传递到页面或应用程序组件部分，就像这样，它从一个简单的模板字符串和一个 props 数组创建一个名为“foo”的组件，您还可以单独使用 JS 对象以相同的方式扩展数据、创建、打开等：

new Vue({
  el: '#app',
  data: {
    foo: 'bar',
    props: {a: 'a', b: 'b'}
  },
  components: {
    foo: {
      template: '<p>{{ a }} {{ b }}</p>',
      props: ['a', 'b']
    }
  }
})

Answer 2

v-html只渲染纯 HTML，请参阅https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

对于你的情况，你可能应该看看渲染函数和 JSX。我不是专家，但似乎有些人正在通过dangerouslySetInnerHTMLJSX 功能实现您想要的目标。看看这个线程：How do I conversion a string to jsx?

我知道有时我们别无选择，但如果可以的话，我认为最好的解决方案可能是避免从后端生成模板，因为它会破坏关注点分离（也可能会破坏安全问题）。