Vue的可复用性/组合——混入对象、自定义指令、插件

xinxin_k
127 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情juejin.cn/post/714765…

  • 注意混入对象的参数和数据在组件之间不共享，例如我在父组件里把num+1，b组件不做任何操作，b组件的依然是混入对象的初始值，也就是说在a组件里改参数对b数据没影响。
  • 代码如下：

父组件.png

子组件.png

混入对象

这里面讲的是组件里边的某些东西如果经常使用他们的话，可以进行一个封装，进行复用。 混入本身是个对象，它里面有export里所有的属性，可以把它放到任何一个组件里，引入进去，会把组件原来的对象进行合并。很多时候我们都把他写成一个单独的js文件。

局部混入

  1. 数据对象进行递归合并，并且如果数据发生冲突，则以组件自身的数据优先。
  2. 同名钩子函数将合并为一个数组，并且混入的要比组件自身的钩子函数先调用。
  3. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

具体使用步骤： 1、先创建一个混入对象，对象名自定义

1.png 2、哪里需要这个混入对象，就在哪个组件通过import引入，通过mixins属性进行注册，值为一个数组。

2.png

自定义指令

主要是对DOM元素的一些操作，就可以定义成"自定义指令"。 区别：创建的位置不一样，作用域就不一样，里面的代码是一样的。

全局自定义指令

通过Vue.directive("指令名称",{})

局部自定义指令

在组件里注册，通过

<template>
   <input v-focus/>
</template>
export default{
   name:"App",
   methods:{},
   components:{},
   directives:{
       指令名(focus)：{在这里写具体要做什么}
   }
}
  1. bind(){}：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次初始化设置。
  2. inserted(){}：组件加载时调用。大多数时候节点干什么事都在该钩子函数里进行的。
  3. update(){}：只要组件更新了必然会调用该钩子（但也可能在父组件更新子组件没更新之前调用），但是组件更新数据没变化可以在里面做一些优化
  4. componentUpdated(){}：该函数在父子组件都更新完成之后调用。
  5. unbind(){}：只调用一次，指令与元素解绑时调用。

在钩子函数里具体怎么操作DOM？

注意在自定义指令里操作的是真实DOM。

每个钩子函数都可以接收到5个参数，参数如下：

  1. el ：它代表的是当前绑定了自定义指令的节点。
  2. binding：它可以获得指令后面的数据，该参数值是一个对象，对象有几个对应的属性，如下：
  • value：得到的是指令=后面的表达式得值；
  • expression：得到的是指令=后面的字符串形式的表达式；
例如：v-dirTest="1+1";  
     使用binding.value的到的值是2；
     使用binding.expression得到的值是"1+1"
  • arg：得到的是指令：后面的值；
例如：
v-dirTest:upper="comName"
binding.arg得到的是字符串upper
bingding.arg==="upper";结果为true
  • name：得到的是不包括v-的前缀指令名；
v-dirTest:upper="comName"
binding.name==='dirTest';//true
  • oldValue：指令绑定的前一个值，仅在update和componentUpdate钩子函数中可用。
  • modifiers：一个包含修饰符的对象；
v-dirTest.foo.bar
binding.modifires={foo:true,bar:true}
只要是这里面有的指令修饰符，那么结果就为true，没有就不显示。

注意：binding里的值是接收到的值，是只读的，因为修改它了之后组件也不会更新。

  • vnode：Vue 编译生成的虚拟节点。
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

vue2自定义指令钩子

1.png

vue3自定义指令钩子都变成了生命周期函数

2.png

插件

使用这些插件都需要先下载插件 在入口文件里调用Vue.use(插件名，{也可以加第二个参数是一个可选的选项对象})，这一步叫做注册插件

如果自己封装插件的话，是单独写成一个js文件，因为暴露的是一个对象。

avatar
文章
阅读
粉丝