vue自定义组件

指令的分类

• 私有自定义指令
• 全局自定义指令

私有自定义组件

在每个vue组件中，directives节点下声明私有自定义指令

// v- 是固定写法
<p v-color="color">9999</p>
<p v-color="'red'">测试<p>

export default {
  data() {
    return {
      color: "blue",
    };
  },
  // 自定义指令的节点
  directives: {
    // 定义一个color的指令，指向一个配置对象
    color: {
      // 当指令第一次绑定到DOM元素上时，会立即触发bind函数
      // 形参中的el表示当前指令所绑定的DOM对象
     bind(el, binding) {
        console.log("触发了bind函数", el, binding);
        el.style.color = binding.value;
      },
    },
  },
};

指令简写

bind函数只调用一次：当指令第一次绑定到元素时调用，当DOM跟新时bind函数不会被触发

update函数会在每次DOM更新时被调用

  // 自定义指令的节点
  directives: {
    // 定义一个color的指令，指向一个配置对象
    color: {
      // 当指令第一次绑定到DOM元素上时，会立即触发bind函数
      // 形参中的el表示当前指令所绑定的DOM对象
      bind(el, binding) {
        console.log("触发了bind函数", el, binding);
        el.style.color = binding.value;
      },
      update(el, binding) {
        console.log("触发了update函数", el, binding);
        el.style.color = binding.value;
      }
    }
  }

bind和update函数中的逻辑完全相同，则对象格式的自定义指令可简写成函数格式

// 自定义指令的节点
directives: {
    // 定义一个color的指令，指向一个配置对象
    color(el, binding) {
      console.log(el, binding);
      el.style.color = binding.value;
    }
}

全局自定义指令

全局共享的自定义指令需要通过Vue.directive()进行声明

// --main.js

// 定义
// 参数1：字符串 表示全局自定义指令的名字
// 参数2：对象，用来接收指令的参数值
Vue.directive('color', (el, binding) => {
  el.style.color = binding.value
})

// 使用
<p v-color="color">9999</p>
<p v-color="'red'">测试<p>