定义与使用 Vue 组件

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 Vue 应用里,一个组件可以是一个单独的文件,这种组件叫 single file component ,单文件组件,简称 SFC。组件就是应用里的一块可以重复使用的界面,你可以定义组件的模板,样式,还有组件可以做的事情。下面我们会一步一步的了解怎么在 Vue 应用里创建跟使用组件。

在 src/app 的下面,新建一个组件文件,放在 components 目录的下面,文件的名字是 app-button.vue,组件文件名字的后缀一般就是这个 .vue。

在这个文件里,先添加一组 template ,在里面可以设计一下这个组件的模板,也就是这个组件的界面结构。用一组 button 标签。 按钮文字暂时设置成 按钮 。

使用

现在,在其它的组件里我们就可以使用这个组件了,比如在这个 app 组件里可以试一下,首先要在组件文件的 script 里面,导入要在这个组件里使用的组件,用 import 导入,导入进来的名字是 AppButton,来自当前目录下的 components 里 app-button.vue,导入的时候不加 .vue 后缀也可以。

导入进来以后,要在这个组件的对象里添加一个 components 属性,它的值是一个对象,里面是想在当前这个组件里使用的其它的组件,这里就是在上面导入的这个 AppButton。

现在我们就可以在这个组件的模板里使用 AppButton 这个组件了,组件的用法跟普通的 html 标签差不多。一组尖括号,里面是组件的名字,这里就是 AppButton。后面可以再加上一个组件的结束部分,在开始与结束部分中间可以包装一些东西,如果没有可以包装的东西,也可以用自关闭的方法使用组件,尖括号,组件的名字,空格,再加上一条斜线。

在浏览器上观察一下,你会发现,界面上会显示两个按钮,它们都来自 AppButton 组件。检查一下这个按钮元素,你会发现,其实它们就是一个普通的 button 标签,标签文字是 按钮 这两个字。这段 html 代码就来自 AppButton 组件的模板。

这里使用组件用的是 PascalCase 的写法,就是第一个词的首字母大写。vue 还支持一种 kebab-case 的写法使用组件,就是串串的写法,也就是组件名的词与词之间用小横线连接。

回到浏览器观察一下,页面上现在会显示四个按钮。

定义与使用 Vue 组件《 Vue.js 前端应用 #4:高级组件 》

统计

12921
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点