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

Question

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

点击＆＃34;添加员工＆＃34;按钮，我想将红色框中的内容更改为另一个组件？

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>

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

data:{
    currentView: "staff-listing"
}

在模板中

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

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