个人对于Vue自定义组件的见解

前言

此文是本人对于Vue自定义组件的见解，如有错误，欢迎指正

自定义组件是什么？

自定义指令是Vue.js框架提供的一种强大的API，允许开发者在Vue的渲染过程中注入自定义行为。自定义指令提供了一种灵活的方式来扩展Vue的功能，它们可以应用于元素和组件上，以实现一些Vue内置指令无法完成的任务。

自定义指令的组成

• 名称：自定义指令的名称，它遵循Vue的命名规则，以v-开头，后面跟自定义的指令名。

• 钩子函数：自定义指令可以包含多个钩子函数，这些钩子函数在指令绑定到元素的不同阶段被调用。主要的钩子函数包括：

  • bind：只调用一次，指令第一次绑定到元素时调用。
  • inserted：被绑定元素插入到父节点时调用（仅保证父节点存在，不一定在document中）。
  • update：所在组件的VNode更新时调用，但是可能发生在其子组件的VNode更新之前。
  • componentUpdated：指令所在组件的VNode及其子组件的VNode全部更新后调用。
  • unbind：只调用一次，指令与元素解绑时调用。

创建又可以分为全局注册与局部注册，全局注册指一般在main.js里注册事件，如：

此时组件的作用域为全局，而局部注册的自定义指令的作用域仅限于注册它的组件及其所有子组件。这意味着，局部注册的指令不会影响其他组件或Vue实例，除非它们是注册指令组件的子组件，示例如下：

由创建到实现

创建并实现Vue自定义指令，可以简单分为以下几个通俗易懂的步骤：

1. 定义指令： 告诉Vue你想要创建一个自定义指令，给它起个名字。

2. 编写钩子函数： 为指令添加行为，就像给函数编写代码一样。钩子函数会在特定的时候被调用。

3. 注册指令： 让Vue知道这个指令，可以选择全局注册（到处都能用）或者局部注册（只在某个组件里用）。

4. 在模板中使用： 在你的Vue组件模板中，像使用普通指令一样使用你的自定义指令。

5. 传递参数（可选）： 如果需要，可以给指令传入参数，告诉它更多的执行细节。

简单来说，就像做一道菜：

1. 决定做什么菜（定义指令）。
2. 写下菜谱（编写钩子函数）。
3. 告诉厨房你要做这道菜（注册指令）。
4. 开始做菜（在模板中使用）。
5. 根据口味添加调料（传递参数，可选）。

这样，你的自定义指令就创建并可以使用了。

全局注册与局部注册有何不同呢

1. 注册对象：

   • 全局注册：直接在Vue的原型上注册指令，使用Vue.directive。
   • 局部注册：在组件的directives属性中注册指令，是一个对象的属性。

2. 指令对象：

   • 全局注册和局部注册的指令对象格式相同，都包含了钩子函数。

3. 组件结构：

   • 全局注册不依赖于组件结构，因为它是在Vue实例化之前进行的。
   • 局部注册依赖于组件结构，因为它是组件选项的一部分。

4. 使用方式：

   • 全局注册的指令在模板中使用时不需要指定组件。
   • 局部注册的指令在使用时也不需要指定组件，但它的作用域限制在注册它的组件及其子组件内。

5. 示例代码位置：

   • 全局注册的示例代码通常出现在应用的配置或初始化阶段。
   • 局部注册的示例代码出现在组件的定义中，与组件的其他选项（如data、methods等）一起。

6. 可维护性：

   • 全局注册的指令由于其全局性，可能会影响到应用的多个部分，因此在维护时需要更加小心。
   • 局部注册的指令由于其作用域限制，通常更容易维护和理解。

如何传递参数给自定义指令

1. 基本值

就像给函数传参数一样简单，直接在指令后面写上等号和值：

<div v-my-directive="100">计数到100</div>

2. 表达式

如果你想传的参数是根据某些数据计算出来的，可以写一个表达式：

<div v-my-directive="counter + 1">计数器加1</div>

3. 对象

如果你需要传递多个参数，可以用对象来打包它们：

<div v-my-directive="{name: 'Kimi', age: 1}">介绍Kimi</div>

4. 修饰符

修饰符就像指令的小开关，用点.表示，可以告诉指令用不同的方式执行：

<div v-my-directive.loudly>大声说话</div>

5. 动态参数

有时候，你想根据数据动态改变指令的参数，可以用方括号[]：

<div v-my-directive:[dynamicParam]="value">动态参数</div>

6. v-bind

如果你的指令参数是一个复杂的对象，可以使用v-bind来传递：

<div v-bind:v-my-directive="complexObject">复杂对象参数</div>