表单上用的这个按钮可以单独定义成一个组件，在项目下面新建一个组件，放在 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 组件。