Alert提示框的vue组件编写
最近一直学习vue,跟着视频敲代码,敲了两三个组件后,终于对编写组件有一个大致的思路了,以下通过编写一个alert提示框组件大致梳理一下我编写组件的思路。
主要分为三个部分:组件引入(注册路由器)、定义组件内容样式及实现组件间通信。
(注册路由器使用路由组件也可放到最后一步,个人习惯先引入然后定义组件及样式便于观察组件显示效果)
下面是本组件引入后显示效果,通过登匹配验证为false触发alert提示框显示,点击确认关闭提示框:
组件引入
一种是写入路由,要先在在router.js中配置路由:
routes: [{path:'', component:''}]]
通过路由组件标签
<router-link to="/" />
注册路由器;
另一种是通过import方式在父组件中引入,通过路由组件标签
<router-view />
注册路由器,本文通过第二种方式注册路由器:
import AlertTip from '@/components/AlertTip'
export default {
components: {
AlertTip // 忘记会报错:'AlertTip' is defined