vue（3）vue组件

何时需要组件

我们点击《授权协议》和 开始授权按钮 的时候，都需要一个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：

或者 v-bind 的缩写 ：

如果不需要动态绑定，直接在父元素的 data 把数据写好，然后 ：

响应子组件的事件

子组件的按钮被点击了或者完成了某项任务，这需要告诉父组件，从而让父组件选择自己的业务逻辑代码去处理这件事情。千万不能让子组件自己去处理，因为子组件并不知道每个父组件需要什么的功能，不可能对父组件的需求一一满足。 

当子组件完成任务（可以是某个按钮被点击了，某个数据加载完毕了，某个时刻到了需要自己退场了），子组件只需要吼一下，然后父组件听到了，去响应这段呐喊就可以。 

子组件的发声：

 

modal 的按钮被点击后，modalButtonClick( ) 开始运行，此时通过调用vue的实例方法 vm.$emit( event, […args] ) ，触发一个事件，附带上一些参数：

本例中的 this.$emit("modal-click","OK"); modal-click 就是事件名称 ， 字符串 OK 就是附带的参数 。

触发的事件需要父组件在 中监听 ：

然后父组件在自己的实例选项 methods 中去定义 modalClickAnswer 方法即可：

在本例中，当点击 modal 底部的按钮时，父组件只是简单地对 modal框 进行关闭而已。

复用

modal 组件需要多次调用，如果数据不同，可以调用不同的方法：