• vue：结合elementUI设计网站登录页

    这次主要是记录三个重点：1，组件间通信的方法（其一）2，脚手架搭建的vue工程的组件调用 3，elementUI 的轮播图与模态框的设计

    先看效果图

     

     

     

     简单的就做了这四个页面，总共四个组件实现这些效果（这个小网站需要的组件也挺多的，当然不止这四个）。

    问题：在点击登录按钮时渲染模态框登录，点击叉或者退出时不渲染这个dom结点，再点击登录又重新渲染dom结点？（注意elementUI的dialog具备一个属性:visible.sync="dialogFormVisible" 异步显示属性，由组件的一个布尔类型的数据进行控制）所以dom结点的渲染和表单的显示是由两个属性控制的，而一个是父组件的属性，一个是子组件的属性，如何同步？这里就必须用到组件间的通信。

    这里子组件在自己点击叉或者退出的时候只需要给父组件发送一个动作，父组件及时的取消dom结点的渲染：

    父组件（App.vue）：

    1.     <div v-if="loginWord === true">
    2.       <login @close="closeL">login>
    3.     div>
    4.  
    5.    closeL(){
    6.       this.loginWord = false
    7.     },

    子组件（UserLogin.vue）:

    1.     methods:{
    2.       // 点击模态框的小叉叉
    3.       handerColse(){
    4.         this.dialogFormVisible = false
    5.         // 调用父组件在子组件上绑定的方法，在父组件内运行（可实现子组件对父组件的通信）
    6.         this.$emit('close')
    7.       }
    8.     },

    这样通过调用绑定事件的方法就可以实现子组件与父组件的同步。

    问题：组件间如何调用？

    我想这个就很简单了，组件包含的三种标签，template，script，style各自负责相应的内容，而我们要想实现调用组件只需要先引入再注册：

    1.