封装组件库（黑马从0到1封装组件）

封装组件库（黑马从0到1封装组件）

1.组件通信很重要，插槽，props校验，计算属性和监听属性，v-model语法糖，npm发布，了解组件实现原理

所有的组件在main.js中先导入再全局注册

1.button组件

需要的知识点：组件通讯，组件插值，props校验

使用type，属于通讯里面的父传子，App.vue使用了hm-button,把type的值传给封装的button组件，所以子组件button得去接收type属性。

click是子传父

给button注册了事件，点击button就会触发自己身上的click事件，给父组件派发了click事件，组组件给按钮注册了点击事件，这样就可以触发了

面试：

事件捕获：在封装dialog组件的时候点击遮罩层，可以让dialog隐藏，但是由于dialog本身也在遮罩层里面，所以需要用到@click.self : 事件只作用在元素本身，而不是其子元素

关于visible数据，不是dialog.vue自己的数据，而是App父组件prop传过来的数据，所以就需要父组件自己改值，

子组件里的 handleClose函数体是触发一个父组件自己的事件

即 handleClose()函数接受一个事件参数

//子组件
handleClose(){
   this.$emit('close',false)
  }
//父组件
close(value){

   this.visilbe = value

  }

子组件修改父组件的数据，

用 .sync修饰符，本来是父组件给子组件定义一个属性值，子组件想要修改就自定义一个事件，然后在函数里，

this.$emit(‘updata:money’, 200)

2.二次封装dialog组件库

因为好多地方都需要用到dialog，每次直接复制，代码繁琐，所以直接二次封装

其实就是控制visible，visible是子组件里面的值，在父组件点击按钮显示dialog

<el-button @click = "showDialog">点击按钮显示dialog<el-button>

methods:{
 showDialog(){
 this.$emit('change',vis)
 }
}