我在管理区域中有一个表单,用户可以在其中输入带有简码的文本:
在 [temp c=200] 下加热烤箱
我想要的是temp
在前端显示时将短代码解析并转换为 Vue 2 组件。
这是一个简化的Temperature.vue
组件:
<template>
<span class="temperature">
{{ celsius }}°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 组件,这在某种程度上是意料之中的。
在 <temperature :celsius="200"></temperature> 下加热烤箱
我似乎无法理解的是我应该采取什么步骤才能将其实际转换为Temperature
我定义的组件。甚至可能吗?有没有我想念的更正统的方法?
v-html
用于呈现文本也存在安全问题。我不一定希望它在那里,但我猜期望Temperature
组件从转义字符串中出现更加牵强。我总是可以在插入数据库之前进行清理,但如果可能的话,我仍然想避免v-html
。