vue.js - Vue - 从字符串中渲染一个元素
问题描述
我想从我的数据库中的字符串创建一个 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("https://unpkg.com/emoji-datasource-apple@4.0.4/img/apple/sheets/64.png"); background-size: 5200%; background-position: 15.6863% 41.1765%;"></span>
我只得到:
<emoji emoji=":santa::skin-tone-3:" :size="16"></emoji>
按预期渲染此元素的最佳可能性是什么?
解决方案
这里有一些更简单的方法来做你通常想要的。如果您提供更多细节,您的正确方向可能是这些解决方案之一之前的策略模式,但这些解决方案之一可能是您想要的:
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']
}
}
})
推荐阅读
- ios - 线程 1:EXC_BREAKPOINT(代码=1,子代码=0x18407cb5c)
- ios - 避免两个相同的 SCNNode 之间发生冲突
- json - bash cvs 文件到 json 新文件
- java - 从可变长度的十六进制字符串中检索数字
- php - 将我的所有用户及其属性写入文件(100K+ 用户)EAV 表和自动化
- java - JFoenix JFXTreeTableView 列标题对齐
- ajax - 我将如何使用 $.ajax 而不是使用 async 和 fetch 来编写代码?
- c# - .NET Core IServiceCollection 替换不刷新
- c++ - 复制构造函数、传值传值、链式操作、编译器
- sharepoint - 检查指定用户是否属于特定组