在 Vue 中返回组件的输出作为方法的 HTML 响应的一部分.js

Question

我正在使用Material Design的Vue组件图标集。我想处理一个字符串以在中间包含一个图标。

输入(我无法控制的字符串(：

"我想要一个图标去那里">

期望输出：

"我想找个<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>')
}
}
}

但它回来是空的。

Answer 1

我根据本教程和贾斯汀·卡恩的建议想通了这一点。必须创建组件的实例，然后才能访问输出和其他属性。

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 具有我需要的属性。

Answer 2

如果您知道组件将是什么，则可以使用模板中的v-if切换该组件

<template>
... other stuff
<TimerIcon v-if="showTimer" />
</template>

如果不想将模板耦合到特定组件，可以将组件向下传递并使用v-bind:is或仅:is

<component :is="TimerIcon"> </component>

来源： https://v2.vuejs.org/v2/api/#component