从短代码动态注入 Vue 2 组件

Question

我在管理区有一个表单，用户可以在其中输入带有简码的文本：

Heat oven at [temp c=200]

我想要的是 temp 短代码在前端显示时被解析并转换为 Vue 2 组件。

这是一个简化的 Temperature.vue 组件：

<template>
    <span class="temperature">
        {{ celsius }}&deg;C
    </span>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    export default {
        props: ['celsius'],
        name: 'temperature'
    }
</script>

这是一个简化的 Instructions.vue 组件，它将使用短代码解析和呈现文本：

<template>
    <div v-html="parseShortcodes(text)"></div>
</template>

<script>
    import ShortcodeParser from 'meta-shortcodes'
    import Temperature from 'Temperature.vue'

    export default {

        data: () => {
            return {
                text: 'Heat oven at [temp c=200]',
                parser: ShortcodeParser()
            }
        },
        components: [
            Temperature
        ],
        methods: {
            parseShortcodes(text) {
                return this.parser.parse(text)
            }
        },
        created() {
            this.parser.add('temp', function(options) {
                return '<temperature :celsius="'+options.c+'"></temperature>'
            })
        }
    }
</script>

解析正常，替换打印在前端。但是 <temperature> 标签是按字面意思呈现的，而不是 Vue 组件，这有点符合预期。

Heat oven at <temperature :celsius="200"></temperature>

我似乎无法理解的是我应该采取什么步骤才能将其实际转换为我定义的 Temperature 组件。有可能吗？有没有我遗漏的更正统的方法？

使用 v-html 呈现文本也存在安全问题。我不一定希望它存在，但我猜期望 Temperature 组件出现在转义字符串中更加牵强。我总是可以在插入数据库之前进行清理，但我仍然想尽可能避免 v-html。

Answer 1

目前没有编译模板的步骤，这就是它呈现为文本的原因。我认为您可以执行以下操作以将文本替换为 component

找到温度后将其包裹在 html 元素中
在 JavaScript 中创建新的 Vue 实例（不是作为字符串中的 html 模板）
使用 el 选项或 $mount
使用插值代替v-html来防止XSS https://vuejs.org/v2/guide/syntax.html#Text

Answer 2

这是我的方法，不知道是不是你想要的。它引入了一个中间组件来动态渲染内容。此外，我为测试修改了 Instructions.vue 一点，您可以修改以适合您的简码解析器

Instructions.vue

<template>
  <div>
    <input type="text" @input="parseInput" />
    <DynamicComponent :type="parsedType" :props="parsedProps"></DynamicComponent>
  </div>
</template>

<script>
import DynamicComponent from './DynamicComponent';


export default {
  components: {
    DynamicComponent
  },
  data() {
    return {
      parsedType: '',
      parsedProps: ''
    };
  },
  methods: {
    parseInput(e) { // parse the input
      if (e.target.value === '[temp c=200]') { // change this to use your parser
        this.parsedType = 'Temperature';
        this.parsedProps = { celsius: 200 };
      } else {
        this.parsedType = '';
        this.parsedProps = '';
      }
    }
  }
};
</script>

DynamicComponent.vue

<script>
import Temperature from './Temperature';
// import all other dynamically rendered components


export default {
  components: {
    // let it know what components are there
    Temperature
  },
  props: ['type', 'props'],
  render(h) {
    return h(this.type, {
      props: this.props
    }, this.$slots.default);
  }
};
</script>

Answer 3

为了使您的示例正常工作，您需要使用 Instructions 组件的渲染功能。在渲染函数中，您可以创建一个新的 Vue 组件，比方说 'intruction'，您将向其传递短代码解析产生的字符串以用作模板。在该组件声明中，您将附加 Temperature 组件作为子组件，它将呈现您传递的道具。就是这样。示例如下：

Instructions.vue

<script>
    import ShortcodeParser from 'meta-shortcodes'
    import Temperature from 'Temperature.vue'

    export default {

        data: () => {
            return {
                text: 'Heat oven at [temp c=200]',
                parser: ShortcodeParser()
            }
        },
        methods: {
            parseShortcodes(text) {
                return this.parser.parse(text)
            }
        },
        render (createElement) {

            const template = this.parseShortcodes(this.text) //returns something like this <div class="intruction">'Heat oven at <temperature :celsius="200"></temperature>'</div>

            var component = Vue.component('instruction', {
                template: template,
                components: {
                    'temperature': Temperature
                }
            })

            return createElement(
                'div',
                {
                    class: {
                        instructions: true
                    }
                },
                [
                    createElement(component)
                ]
            )
       }
    }
</script>

从短代码动态注入 Vue 2 组件

Dynamically inject Vue 2 component from shortcode

vue.js

vuejs2