Vue.js 重叠Vue组件

我有一根这样的线：

"Hello World! It's me, Chelsea."

<MyComponent :text="Hello"/> <MyComponent :text="World"/>! It's me, <MyComponent :text="Chelsea"/>.

和字符串列表

["Hello", "World", "Chelsea"]

我想在Vue组件中动态包装匹配字符串。单独来看，它是这样的：

"Hello World! It's me, Chelsea."

<MyComponent :text="Hello"/> <MyComponent :text="World"/>! It's me, <MyComponent :text="Chelsea"/>.

！是我。

解决此问题的方法如下（感谢尤利西斯BN）：

{{s}

但是我们遇到了一些问题，我们的列表中有多个单词字符串（例如“It's me”），更具体地说，是重叠的单词。如果我们在字符串列表中添加“Hello World”，理想结果如下：

<MyComponent :text="Hello World"> 
  <MyComponent :text="Hello"/> 
  <MyComponent :text="World"/>!
</MyComponent>
It's me, <MyComponent :text="Chelsea"/>.

!
是我。

---

如何实现此功能？我有一种预感，它涉及v-for和某种递归函数，但我怎么也说不出来。

我不确定您的用例，但可能类似这样的东西会合适：

<template v-for="item in myContent">
    <span v-if="item.type === 'string'">{{ item.content }}</span>
    <my-component v-else-if="item.type === 'component'" :text="item.content" /> 
</template>

myContent: [
    {'content': 'hello', type: 'string'},
    {'content': 'hello world', type: 'component'},
    {'content: 'world', type: 'component'},
    {'content': 'oh hello world', type: 'string'}
]

{{item.content}
内容：[
{'content'：'hello'，键入'string'}，
{'content'：'hello world'，键入'component'}，
{'content:'world'，type:'component'}，
{'content'：'ohhelloworld'，键入'string'}
]

---

您可以使用computed获取字符串，并在此结构中返回它，将任何匹配的单词拆分出来。

我认为split并不是在做您认为正确的事情。我将使用正则表达式而不是字符串。似乎这需要仔细考虑。一些问题：1）如果循环遍历拆分的字符串片段，您将如何检查多单词短语？2） 如果“me，Chelsea”匹配[“me Chelsea”]（注意字符串中的逗号，但不在列表中）3）如果您的列表如下：[“Hello”，“World”，“Chelsea”，“Hello World”，“World It's”]？在这种情况下，“世界”属于两个独立的父短语