何时需要组件
我们点击《授权协议》和 开始授权按钮 的时候，都需要一个modal弹出框来提示用户相应的信息。这个modal就是我们需要做的组件。
modal：
注册组件，并抽取到 .js 文件中
1、注册
需要注意的是 vue 可以全局注册和局部注册组件，我们可以根据实际情况的不同分别采取不同的注册方式。
这里的 modal 在多处需要用到，我们采用全局注册的方式。
利用代码 Vue.component(tagName,options ) 来注册一个全局组件，并根据实际情况传入不同的参数选项来配置组件的内容。
tagName 是你自定义的组件名字，options 是配置选项。如本例的 tagName 就是 modal ， options 就是 props、methods、template 。
- template 是页面的 html结构，里面可以使用 vue 指令、插值等 。
- props 是绑定父元素传过来的数据，父组件的数据需要通过 prop 才能下发到子组件中。modalMsg 和 modalTitle 就是用来接受父组件传过来的标题和正文内容的名字。
- methos 是组件需要绑定的方法。我们给modal底部的按钮绑定一个 modalButtonClick( ) 的方法，当点击按钮触发该方法的时候，进行一些业务逻辑的处理 。
组件注册写在 component.js 文件中：
当然如果还有别的组件，可以继续用 Vue.component(tagName,options ) 来注册。
2、使用
在实例挂载的元素内部使用组件，也就是 demo3.html 中被 vue 实例的 #app1 内部：
3、切换显示和隐藏
在父组件引用后，我们使用了 v-if 来绑定一个父组件的数据 modalShow ， 然后在父组件的业务逻辑代码中去控制 modalShow 的真假，从而让 modal 组件显示/隐藏。
显示：
this.modalShow = true ;隐藏：
this.modalShow = false ;vue是数据驱动界面的，这才是精髓所在。
需要注意的是，全局组件必须要在实例注册之前完成。也就是说 component.js 要在 demo3.html 的 new Vue({}) 前完成引入：
父子组件的数据传递
demo3.html 的实例引用了 modal 组件，那么demo3.html 的实例就是 modal 的父组件，父组件需要通过 props 传值给子组件 。
父组件的数据流向 ：
子组件的数据流向
注意两点：
1、camelCase 和 kebab-case
在子组件 modal 中定义的 modalMsg 和 modalTitle ， 写在父组件上时需要转换成 modal-msg 和 modal-title :
官网： HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名) 。
2、props 的动态绑定
modalMsg 和 modalTtile 的值会通过不同的方法去传入不同的值，这样就必须要使用到动态绑定的指令 v-bind：
<modal v-bind:modal-msg="modalMsg" v-bind:modal-title="modalTitle"></modal>或者 v-bind 的缩写 ：
<modal :modal-msg="modalMsg" :modal-title="modalTitle"></modal>如果不需要动态绑定，直接在父元素的 data 把数据写好，然后 ：
<modal modal-msg="modalMsg" modal-title="modalTitle"></modal>响应子组件的事件
子组件的按钮被点击了或者完成了某项任务，这需要告诉父组件，从而让父组件选择自己的业务逻辑代码去处理这件事情。千万不能让子组件自己去处理，因为子组件并不知道每个父组件需要什么的功能，不可能对父组件的需求一一满足。
当子组件完成任务（可以是某个按钮被点击了，某个数据加载完毕了，某个时刻到了需要自己退场了），子组件只需要吼一下，然后父组件听到了，去响应这段呐喊就可以。
子组件的发声：
modal 的按钮被点击后，modalButtonClick( ) 开始运行，此时通过调用vue的实例方法 vm.$emit( event, […args] ) ，触发一个事件，附带上一些参数：
本例中的 this.$emit("modal-click","OK"); modal-click 就是事件名称 ， 字符串 OK 就是附带的参数 。
触发的事件需要父组件在 <modal> 中监听 ：
<modal v-on:modal-click="modalClickAnswer"></modal>然后父组件在自己的实例选项 methods 中去定义 modalClickAnswer 方法即可：
在本例中，当点击 modal 底部的按钮时，父组件只是简单地对 modal框 进行关闭而已。
复用
modal 组件需要多次调用，如果数据不同，可以调用不同的方法：
