vue小结

173 阅读1分钟

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 不能监测到以下变动

  1. 当利用索引直接设置一个项时
this.item[index]=value; //不响应
this.$set(this.item,index,value)
  1. 修改数组长度
this.item.length=2 // 不响应
  1. 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 只触发自己范围内的元素,不包含子元素