用户登录

表单上用的这个按钮可以单独定义成一个组件,在项目下面新建一个组件,放在 src/app/components 的下面,名字叫 button-field.vue ,在这个文件里定义一个组件,名字是 ButtonField。

属性

先设置一下组件需要用的几个属性,添加一个 text ,它是按钮上面的文字,类型是 String ,再添加一个 size ,这个属性可以控制按钮大小,类型是 String。

事件

组件里需要触发一个 click 事件,添加一个 emits ,一个数组,里面添加一个 click 。

模板

下面再处理一下组件的模板,一组 div 上面加上 field 这个类, 里面包装的是一个 button 元素,按钮文字可以绑定 text 这个属性。

然后绑定元素的 class 属性的值,一个数组,里面先添加一个 button 类,再添加一个 size,这个 size 是组件里的一个属性。

再绑定一下元素的 click 事件,发生点击事件,可以触发一个 click 事件。

使用

下面在登录组件的上面用一下刚才定义的按钮字段组件,先导入这个组件,名字是 ButtonField 位置是 @/app/components/button-field 。 在组件的 components 选项里面,再添加一个要使用 ButtonField 。

然后在组件的模板里用一下这个组件,删除掉这个按钮字段,换成 ButtonField 。使用这个组件的时候可以设置一下它的 text 属性的值,登录。 再用 size 属性设置一下按钮大小,设置成 large。

再绑定一下 click 事件,用 onClickLoginButton 这个方法处理这个事件。

预览

回到浏览器上预览一下,现在这个登录表单上显示的按钮,就是我们定义的 ButtonField 组件。

定义按钮表单字段组件(ButtonField)《 Vue.js 项目实践:身份验证 》

统计

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

社会化网络

关于

微信订阅号

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