vue比较有用的api总结

2020年06月29日

hookEvent

给一个组件注入一个生命周期函数

<child @hook:updated="childUpdateHandle" />

这种写法常常用于给第三方组件的生命周期添加方法,比如第三方的table组件没有loading效果,我们可以给第三方组件添加mounted事件等。

组件使用this.$on绑定

vm.$on('hooks:created', cb)
vm.$on('hooks:created', cb)

这种写法使得代码的可读性增加,如遇到以下场景,我们需要在组件挂载完成的时候添加一个监听事件,等组件销毁等时候要删除该监听等事件。

export default {
  mounted() {
    // 监听窗口发生变化,resize组件
    window.addEventListener('resize', this.resizeHandle)
    // 通过hook监听组件销毁钩子函数,并取消监听事件
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.resizeHandle)
    })
  },
  updated() {},
  created() {},
  methods: {
    resizeHandle() {
      // ...
    }
  }
}

自定义组件使用v-model

有时候我们需要封装自己等输入框组件,那么v-model是必须的,在理解v-model之前我们需要了解平时所在原生input上使用v-model的原理。

<input v-model="searchText">

等价于

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

当用在组件上时,v-model 则会这样:

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

为了让它正常工作,这个组件内的 input 必须:

  • 将其 value attribute 绑定到一个名叫 value 的 prop 上
  • 在其 input 事件被触发时,将新的值通过自定义的 input 事件抛出

现在 v-model 就应该可以在这个组件上完美地工作起来了:

<custom-input v-model="searchText"></custom-input>

强制vue实例渲染

由于数据嵌套过深,数据改变了,但是视图没有更新,可以使用
vm.$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件

vm.$set( target, propertyName/index, value )

在实例创建之后添加新的属性到实例上,它不会触发视图更新。
受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

this.$set(this.obj,'newPro','value')

组件二次封装,props传递与事件传递

对一个组件进行包装,我们要继承组件对属性与事件,那么v-bind="$props"v-on="$listeners"将使封装变得简单。

将父组件的props传递到子组件

<template>
  <childComponent v-bind="$props" />
</template>

而不是

<template>
  <childComponent :prop1="prop1" :prop2="prop2" :prop="prop3" ... />
</template>

将父组件到事件监听传递到子组件

<template>
  <childComponentv-on="$listeners" />
</template>

深层选择器

如果你引入第三方组件中的页面使用scoped属性,那么想修改第三方组件的样式可以使用深层选择器 >>> /deep/ ::v-deep

示例

<style scoped>
>>> .vant-class {
  color: gray;
}

/deep/ .vant-class {
  color: gray;
}

::v-deep .vant-class {
  color: gray;
}
</style>
0 条评论
文章目录
  • hookEvent
    • 给一个组件注入一个生命周期函数
      • 组件使用this.$on绑定
      • 自定义组件使用v-model
        • 强制vue实例渲染
          • vm.$set( target, propertyName/index, value )
            • 组件二次封装,props传递与事件传递
              • 将父组件的props传递到子组件
                • 将父组件到事件监听传递到子组件
                • 深层选择器
                  • 示例