本文摘自PHP中文网,作者青灯夜游,侵删。
本文介绍了如何在Vue.js中引用组件中的HTML元素。您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板。
Vue路由器用于在DOM中的视图或组件模板之间导航。要使用Vue路由器,请在route组件中定义路由,并向Vue表明应该在事件(如单击)上挂载新组件。
这是处理用户界面内的边栏和菜单组件中的导航的正确方法。
如果您希望在DOM中挂载的两个任意组件之间进行切换而不需要创建路由,那么您可能需要使用动态组件。
动态组件
Vue动态组件允许用户在两个或多个组件之间进行切换而无需路由,甚至在切换回初始组件时保留数据状态。
其核心思想是让用户在不使用路由器的情况下动态地挂载和卸载用户界面中的组件。
为什么动态组件很重要?
在设计用户界面时,您需要某种形式的灵活性来显示或隐藏基于应用程序状态的嵌套组件。动态组件以高效、简单的方式提供了这个平台。
该特性为您节省了大量代码,因为您可以使用v-if
和v-else
等Vue条件结构轻松实现动态组件。您可以使用条件结构来实现动态组件,方法是使用占位符来轻松地将逻辑绑定到组件。
这种方法可以确保您的演示始终是干净和明确的。
才能在Vue中创建动态组件。在你的电脑中,你将需要以下资料:
已安装Node.js版本10.x及更高版本。 您可以通过在终端/命令提示符下运行以下命令来验证您是否拥有Node.js 10.x版:
1 |
|
一个代码编辑器(推荐使用Visual Studio)。
Vue的最新版本,已全局安装在您的计算机上。
您的计算机上已安装Vue CLI 3.0。 为此,请先卸载旧的CLI版本:
1 |
|
然后,安装一个新的:
1 |
|
动态组件的语法
Vue为动态组件提供了一个特殊的模板元素,简称为component
。语法是这样的:
1 |
|
组件元素也可以是一个自关闭标签:
1 |
|
第一个选项最适合浏览兼容性。
演示
下载starter项目并在VS代码中打开它,以获得一些动态组件的示例。starter
项目允许您访问一个现有的测试组件,创建第二个测试组件,并在两者之间进行切换。
导航到components
文件夹并创建一个新文件。 将文件命名为Test2.vue
并将以下代码块复制到文件中:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
现在您有了第二个组件,转到App.vue
文件并注册该组件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
两个测试组件现在嵌套在根应用程序组件中。如果只想挂载一个组件,然后动态切换到另一个组件,则必须创建一个动态组件。
将下面的代码块复制到app.vue
文件的模板部分:
1 2 3 4 5 6 |
|
接下来,使用以下serve
命令运行应用程序:
1 |
|
您将看到只显示Test 1
组件。
相关阅读 >>
更多相关阅读请进入《vue.js》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者