hk-el-ui v0.1.0
微信小程序:前端的日常
发布一些前端开发遇到bug或者解决方案
本项目仅作为vue组件封装的练习参考
初始化项目 npm i
组件库已发布到npm上面,安装组件库 npm add hk-ui
全局导入 import hkUI form 'hk-ui' import 'hkui/lib/hk.css'
Vue.use(hkUI)
学习笔记
1.在日常的组件封装中,难免父组件要给子组件传值,由于vue的父子组件是单向数据流,所以不能直接修改父组件传进来的值,要通过this.$emit通知父组件修改值
看一下官方文档是怎么说的
意思就是父子组件之间规定好的一种方便调用封装的组件的写法
//父组件:title.sync
<text-document :title.sync="doc.title"></text-document>
//子组件update:title
this.$emit('update:title', newTitle)
目的是减少使用者去@title="title"注册事件,方便维护,减少代码量
注意点:
注意带有 .sync
修饰符的 v-bind
不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’”
是无效的)。取而代之的是,你只能提供你想要绑定的 property 名,类似 v-model
。
将 v-bind.sync 用在一个字面量的对象上,例如 v-bind.sync=”{ title: doc.title }”,是无法正常工作的,因为在解析一个像这样的复杂表达式的时候,有很多边缘情况需要考虑。
2.还有一个简写的指令v-model 组件封装使用到的v-model实际上就是:value='value' @input='value=$event.target.value', 子组件里面接收value,并将@input='handlechange',vue里面进行简写v-model
//父组件
<son :value='value' @input='value=$event.target.value'></son>
//子组件
<children :value='value' @input='hadleChange'></children>
hadleChange(e){
this.$emit('input',e.target.value)
}
封装的思路 input框的密码显示与隐藏,父组件传一个type='passWord',我们可以不用去改这个type,自己在组件内部data定义一个passwordVisible:false,点击时取反实现密码的显示与隐藏
//showPassword是传入是否要显示密码的icon,默认为false,显示密码框状态
<input :class='showPassword?(passwordVisible?'text':'password'):type'
swicth组件封装的form验证需要name属性提交到服务器,name是将input隐藏掉,给封装的组件提供name属性可以操作
3.组件from-group为了让孙组件拿到v-model,使用
provide () {
return {
Form: this
}
},
子组件使用inject接收
inject: ['Form'],
2 years ago