动态组件

运行下面的示例。 您会注意到，当您切换回某个组件时，您在一个组件中所做的更改会被忘记。 这是因为组件被卸载并再次安装，从而重新加载该组件。

示例

此示例与前面的示例相同，只是组件不同。 在 comp-one 中，您可以在"Apple"和"Cake"之间进行选择，在 comp-two 中，您可以编写一条消息。 当您返回组件时，您的输入将会消失。

为了保持状态、您之前的输入，当返回组件时，我们在 标签周围使用 标签。

示例

The components now remember the user inputs.

App.vue:

'include' 和 'exclude' 属性

默认情况下， 标签内的所有组件都会保持活动状态。

但是我们也可以通过在 标签上使用"include"或"exclude"属性来仅定义一些要保持活动的组件。

如果我们在 标签上使用"include"或"exclude"属性，我们还需要使用"name"选项为组件提供名称:

CompOne.vue:

示例

对于 ，只有"CompOne"组件会记住其状态以及之前的输入。

App.vue:

我们还可以使用'exclude'来选择哪些组件保持活动状态或不保持活动状态。

示例

对于 ，只有"CompTwo"组件会记住其状态。

App.vue:

通过使用逗号分隔，'include' 和 'exclude' 都可以与多个组件一起使用。

为了展示这一点，我们将再添加一个组件，以便总共获得三个组件。

示例

使用 ，"CompOne"和"CompThree"组件都会记住它们的状态。

App.vue:

'max' 属性

我们可以使用"max"作为 标签的属性来限制浏览器需要记住其状态的组件数量。

示例

使用 ，浏览器将只记住最后两个访问组件的用户输入。

App.vue:

Vue 练习

="activeComp">