Vue 组件 ( Vue component)
Vue 组件的位置
在 Vue 项目中可以看到一类新的文件后缀 .vue
用来表示 Vue 文件。
需要区分在项目目录 src
下的 App.vue
和 src\components
的文件。在认识 Vue project中提到 App.vue
是用来整合各个组件的主文件,其在单页面应用中体现明显;
而 src\components
下的文件就是 Vue 中的组件,使用可复用的组件来简化应用结构。
Vue 组件的创建
在 src\components
目录下,新建文件,输入组件名称后跟 .vue
后缀即可。(关于组件命名可参考 Vue 官网的风格指南)
创建后的 Vue 组件同样可以从 template-script-style 三个维度来定义内容,同样的内容通过适当的传参就可以实现不同场景下的应用。
Vue 组件的使用
暴露接口
组件的复用体现在可以根据传入的参数而进行不同内容的展示。
当然可以定义固定组件,即不需要参数、在任何使用场景下保持同一状态,但这不能体现组件复用的灵活性,因此参数的设置就显得非常必要,而参数的定义体现在暴露给父组件的接口中。
// showMessage.vue <template> <p>{{ msg }}</p> </template> <script> export default { props: { msg: { type: String, required: true } } } </script> <style> </style>
以上代码定义了一个用于展示信息的简单组件,通过该组件来演示组件和调用其的父组件之间如何传递参数。
<template>
标签中使用了模板插值,即通过更改{{}}
中变量的值来改变渲染内容<script>
中export default
即在项目中默认暴露该组件,使得需要使用该组件的父组件能够导入
同时props
对象规定了传递的参数及其对应属性(如参数类型、是否必须)<style>
定义组件样式。其中标签内部的scoped
决定样式是否只应用于该组件
导入组件
来到需要导入 showMessage.vue
的父组件,如将 Home.vue
作为父组件,然后将 showMessage.vue
导入
// Home.vue <template> <div class="home"> <showMessage msg="Hello World"/> </div> </template> <script> // @ is an alias to /src import showMessage from '@/components/showMessage.vue' export default { name: 'Home', components: { showMessage } } </script>
- 导入组件的操作在
<script>
中通过import
关键字实现,from
后为组件所在的路径。 - 在
export default
中注册组件,注册后才可以在<template>
中应用。 - 使用组件的方式类似书写标签,一般以自闭合标签的形式存在,如
<componentName />
- 在标签内进行参数的传递,通过调用
showMessage.vue
同时传入msg="Hellow World"
使得在将Home.vue
与index.html
文件链接后页面中出现内容为 “Hello World” 的<p>
标签。
以上操作需要在项目编译运行的情况下尝试,也可在过程中通过页面自动刷新来观察修改项目文件对页面内容的影响。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具