vue+elementui自定义Dialog组件之登录弹框话框实现(实现不同vue组件关联)

elementui提供一个可实现弹框的组件el-dialog,一般会将弹框写在一个vue文件，通过el-dialog套用类似于这种

登录


   

 
    
  

  
    
  



  

    取 消
    登 录
  

一般不会造成问题，但是写在同一个vue界面，代码比较臃肿，下面演示一下写在不同的vue文件实现调用

首先在navShow.vue的页面写入如下代码

登录


      
    

注意：很多人在写完这个，迫不及待地去点击登陆按钮时报错：

那么这个这个组件是怎那么来的呢

其实他就是：components: {LoginName},里的LoginName,vue会将其自动转换成为驼峰命名法变成一个组件，在webstorm输入<符号，组件信息会有提醒的。当然个人建议在弹出的vue文件里的name，也要和这个相同

下面介绍一下所弹出的vue页面，这个其实和正常的vue文件一样

export default {
    name: 'LoginName',//这个LoginName最好和引入的vue的LoginName相同
}