从源码角度深入剖析：手把手教你自定义Vue.directive、Vue.filter、Vue.component

2023-10-07 04:56:07

在Vue.js中，指令、过滤器和组件都是非常重要的概念，它们可以帮助开发者构建出更强大、更灵活的web应用程序。指令是一种特殊的HTML属性，用于在DOM元素上添加特殊行为；过滤器是一种函数，用于对数据进行格式化；组件是一种可重用的Vue.js实例，可以被嵌套在其他组件中。

一、Vue.directive指令

Vue.directive方法用于注册或获取全局指令。除了核心功能默认内置的指令外（v-model和v-show），Vue.js也允许注册自定义指令。虽然代码复用和抽象的主要形式是组件，但是有些情况下，仍然需要对普通DOM元素进行底层操作，这时就会用到自定义指令。

1. 注册自定义指令

Vue.directive('my-directive', {
  bind: function (el, binding, vnode) {
    // 指令绑定的元素
    el.innerHTML = 'Hello, ' + binding.value;
  },
  update: function (el, binding, vnode) {
    // 指令更新时执行的函数
    el.innerHTML = 'Hello, ' + binding.value + '!';
  },
  unbind: function (el, binding, vnode) {
    // 指令解绑时执行的函数
    el.innerHTML = 'Goodbye, ' + binding.value;
  }
});

2. 使用自定义指令

<div v-my-directive="message"></div>

二、Vue.filter过滤器

Vue.filter方法用于注册或获取全局过滤器。过滤器是一种函数，用于对数据进行格式化。过滤器可以用于格式化字符串、数字、日期等多种数据类型。

1. 注册自定义过滤器

Vue.filter('my-filter', function (value) {
  return value.toUpperCase();
});

2. 使用自定义过滤器

{{ message | my-filter }}

三、Vue.component组件

Vue.component方法用于注册或获取全局组件。组件是一种可重用的Vue.js实例，可以被嵌套在其他组件中。组件可以包含模板、数据、方法、计算属性等内容。

1. 注册自定义组件

Vue.component('my-component', {
  template: '<div>Hello, {{ message }}!</div>',
  data: function () {
    return {
      message: 'World'
    }
  }
});

2. 使用自定义组件