prop
prop
采用对象的形式,不采用数组形式
validator
可以自定义校验方式,比如设置类型,大小,可以在 validator 里判断是哪一个
插槽
具名插槽
进行 name 绑定,属性 name 可以指定是哪个插槽,比如一个组件或模板里有两个插槽,但是样式不一样,这样就可以选择具名插槽
mixins
如果项目太大,考虑下 mixins,在 app.vue 中整合
组件通信
1.父组件给子组件加点击事件
当子组件给父组件传递this.$emit('on-click',event)
时,父组件对于子组件监听的方式是这种写法<i-button @on-click='handleClick'>
也可以直接在父组件引用子组件的时候这样写,直接在父组件声明<i-button @click.native='handleClick'>
方法二更加简单,相当于把组件转换成 html 然后加事件
但是会监听到自组件所有的事件,还可以通过this.$parent
或者this.$children
来实现
但是这三种方式都只能在父子组件中实现,不能跨组件
2.派发与广播方式通信(dispatch 和 broadcast)
3.vue.observable()
返回的对象可以直接用于渲染函数
和计算属性
内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器
4.bus 和 vuex
表单校验
async-validator
这个开源库常用来做表单校验
父子组件渲染顺序
父组件 created 父组件 beforeMounted 子组件 created 子组件 beforeMounted 子组件 mounted 父组件 mounted
nextTick
nextTick 是一个回调函数,要等 dom 渲染完后才会执行,比如使用 v-if 判断显示隐藏时
this.nextTick(()=>{
})
$set
Vue 不能监测到以下变动
- 当利用索引直接设置一个项时
this.item[index]=value; //不响应
this.$set(this.item,index,value)
- 修改数组长度
this.item.length=2 // 不响应
- Vue 不能检测到对象属性的添加或者删除
this.item.b=2 // 不是响应的
this.$set(this.item,'b',2)
以下数组方法能触发视图更新 push() // 在最后新增元素 pop() //删除并返回最后一个元素 shift() //将头部元素删除,并返回改数组 unshift() //在头部新增数组 splice() //截取数组 sort() //排序 reverse() //颠倒数组元素
watch 深度监听
watch 一般只能监听一层,对对象里面进行深度监听,需要 deep
监听 list 会监听到,但是当只监听某个属性,当优化代码时,最好监听 list.x
这样在别的属性改变不会执行 handle
list:{
x: 1,
y: 1,
size_x: 1,
size_y: {
a: 1
}
}
watch:{
"listCopy.size_y": {
handler(newValue) {
console.log(newValue);
},
deep: true
}
}
事件修饰符
常用到的修饰符包括
.stop 防止事件冒泡
.prevent 阻止预设行为,比如 a 标签
.capture 事件冒泡相反,事件由外向内捕获
.self 只触发自己范围内的元素,不包含子元素