javascript - 单击按钮并更改 VueJS 2 中的组件

Question

我是 VueJS 2 的新手，目前正在做一个项目。我使用 Vue-Cli 和 webpack 来创建项目。我很难完成这部分。所以基本上，当我单击一个按钮时，我想更改为另一个组件。

点击“添加人员”按钮后，我想将红框中的内容更改为其他组件？

Current Items in the Red Box

I want to replace this with the current items in the red box

执行此操作的最佳方法是什么？ Vue 文件中有多个模板？

Answer 1

这可以通过多种方式完成。最基本的方法是使用 conditional rendering .

data:{
  addStaff: false
}

<staff-listing v-if="!addStaff"></staff-listing>
<add-staff v-else></add-staff>

或者，您可以使用 dynamic component具有 currentView 数据属性。

data:{
    currentView: "staff-listing"
}

在模板中

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

除了这些选项之外，您还可以使用 VueRouter获取全功能 SPA 导航解决方案..