在Vue.js中将组件的输出作为方法的HTML响应的一部分返回
在Vue.js中将组件的输出作为方法的HTML响应的一部分返回
提问于 2018-09-28 05:23:50
我使用的是Material Design's Vue component icon set。我想处理一个字符串，使其在中间包含一个图标。
输入(我无法控制的字符串)：
“我想要一个图标去那里”
所需的输出
“我想要一个
<timer-icon></timer-icon>去那里”
我正在尝试使用一个处理文本的method来完成这项工作。但是我怎样才能把我的图标组件放进去呢？
我试过了：
<template>
<span>{{ insertIcon(myString) }}</span>
</template>
import TimerIcon from 'vue-material-design-icons/Timer.vue'
export default {
data () {
return {
myString: fromAnotherPlugin // "I want an icon to go there"
}
},
components: {
TimerIcon
},
methods: {
insertIcon: function (string) {
return string.replace('icon', TimerIcon)
}
}
}但它返回[object Object]而不是“图标”。
我还尝试将该组件引用为HTML。
<template>
<span>{{ insertIcon(myString) }}</span>
</template>
import TimerIcon from 'vue-material-design-icons/Timer.vue'
export default {
data () {
return {
myString: fromAnotherPlugin // "I want an icon to go there"
}
},
components: {
TimerIcon
},
methods: {
insertIcon: function (string) {
return string.replace('icon', '<TimerIcon></TimerIcon>')
}
}
}但它回来的时候却是空的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-01 02:29:24
我根据this tutorial和贾斯汀·卡恩的建议弄明白了这一点。您必须创建组件的实例，然后才能访问输出和其他属性。
1)将Vue和组件导入您的页面：
import Vue from 'vue'
import TimerIcon from 'vue-material-design-icons/Timer.vue'2)创建组件的实例
const ComponentClass = Vue.extend(TimerIcon)
const instance = new ComponentClass()3)在函数内的实例上挂载并输出innerHTML
insertIcon: function (string) {
const myicon = instance.$mount()
const myiconhtml = myicon.$el.innerHTML
return string.replace('icon', myiconhtml)
}$el对象包括其他属性，但innerHTML具有我需要的内容。
Stack Overflow用户
发布于 2018-09-28 10:32:20
如果您知道组件是什么，只需在模板中使用v-if就可以切换该组件
<template>
... other stuff
<TimerIcon v-if="showTimer" />
</template>如果不想将模板耦合到特定组件，则可以向下传递该组件并使用v-bind:is或仅使用:is
<component :is="TimerIcon"> </component>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52545343
复制相关文章
相似问题