javascript - 将 vue.js 模板分离到文件中

Question

我想知道 Vue.js 中是否有办法制作此代码:

<template v-if="type === 'login'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>

<template v-if="type === 'subscribe'">
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

看起来像这样:

<template type="login" />

<template type="subscribe" />

<template id="login">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>

<template id="subscribe">
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

这样我们就可以通过 ID 调用模板

就我而言，我想在事件中使用它:

<template v-if="type === 'new_user'">
 <span>welcome {{ username }}</span>
</template>

<template v-if="type === 'user_confiremd'">
 <span>You have full access {{ username }}</span>
</template>

我想做这样的事情:

<template v-for="event in events" :event="event" />

Answer 1

这听起来像是不良做法的开始......

您需要创建两个组件并通过类型变量使用相关组件。

您可以通过路由或动态组件来控制组件。

像这样的事情:

<component :is="type" />

引用资料:

• Dynamic Components
• Routing in Vue js