封装组件库(黑马从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

点击按钮显示dialog

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


你可能感兴趣的:(vue.js,javascript,前端)