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

我正在使用。我想处理一个字符串，以便在中间包含一个图标。 输入（我无法控制的字符串）：

“我想要一个图标到那里”

所需输出：

“我想要一个

去那里”

我正在尝试使用处理文本的

方法来实现这一点。但是我怎样才能把我的图标组件放进去呢

我试过这个：


{{insertIcon（myString）}
从“vue材质设计图标/Timer.vue”导入TimerIcon
导出默认值{
数据（）{
返回{
myString:fromAnotherPlugin/“我想要一个图标到那里”
}
},
组成部分：{
计时器
},
方法：{
insertIcon:函数（字符串）{
返回字符串.replace（'icon'，TimerIcon）
}
}
}

但是它返回
[object]
来代替“icon”

我还尝试将组件引用为HTML


{{insertIcon（myString）}
从“vue材质设计图标/Timer.vue”导入TimerIcon
导出默认值{
数据（）{
返回{
myString:fromAnotherPlugin/“我想要一个图标到那里”
}
},
组成部分：{
计时器
},
方法：{
insertIcon:函数（字符串）{
返回字符串。替换（'icon'，''）
}
}
}

但是它返回为空。
如果您知道该组件将是什么，您可以在模板中使用
v-If
切换该组件

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

来源：
如果您知道该组件将是什么，您可以在模板中使用
v-If
切换该组件

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

资料来源：
我是根据贾斯汀·卡恩的建议得出这个结论的。必须创建组件的实例，然后才能访问输出和其他属性

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具有我所需要的属性。
我根据Justin Kahn的建议得出了这个结论。必须创建组件的实例，然后才能访问输出和其他属性

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具有我所需的属性。
您需要注册新组件，
组件：{MenuIcon}
，并且在使用它时不要使用PascalCase和kebab大小写，就像这样
您不能将组件替换为字符串。组件是一个对象。是否尝试将图标渲染到模板中？如果是这样的话，那么你可以使用动态组件来做到这一点。@fila90谢谢，我在简化代码时从问题中省略了这一点，但它是在原始版本中。我在这里更新了它。你需要注册新的组件，
组件：{MenuIcon}
当使用它时，不要使用PascalCase，像这样使用烤肉串
你不能将组件替换成字符串。组件是一个对象。是否尝试将图标渲染到模板中？如果是这样的话，那么你可以使用动态组件来做到这一点。@fila90谢谢，我在简化代码时从问题中省略了这一点，但它是在原始版本中。我在这里更新了。谢谢你的帮助。我基本上是在处理一个我无法控制的字符串，并试图在其中插入一个图标。我对这个问题稍加修改以澄清。我认为你提出的解决方案行不通，因为我需要提供的字符串中的图标。提供的字符串应该呈现在哪里？它是由另一个插件（moment.js
calendar
string）生成的字符串。还有其他解决方法，但我试图以某种编程方式添加组件结果，所以我不必做更复杂的字符串修改。也许这是不可能的。我认为您可以使用
createElement
呈现
TimerIcon
，转换为HTML标记，然后像您当前所做的那样进行替换。任何交互性都会丢失，但对于简单的显示组件来说，这很好。谢谢，这让我找到了正确的信息，我找到了一种方法。我会发布并接受答案，但是如果你想更新你的答案，请这样做。谢谢你的帮助。我基本上是在处理一个我无法控制的字符串，并试图在其中插入一个图标。我对这个问题稍加修改以澄清。我认为你提出的解决方案行不通，因为我需要提供的字符串中的图标。提供的字符串应该呈现在哪里？它是由另一个插件（moment.js
calendar
string）生成的字符串。还有其他解决方法，但我试图以某种编程方式添加组件结果，所以我不必做更复杂的字符串修改。也许这是不可能的。我认为您可以使用
createElement
呈现
TimerIcon
，转换为HTML标记，然后像您当前所做的那样进行替换。任何交互性都会丢失，但对于简单的显示组件来说，这很好。谢谢，这让我找到了正确的信息，我找到了一种方法。我会发布并接受答案，但如果你想更新你的答案，请这样做。