【Vue】2-14、插槽 & 自定义指令

一、插槽

插槽（Slot）是 vue 为组件的封装者提供的能力。允许封装者在封装组件时，把不确定的，希望由用户指定的部分定义为插槽。  

二、具名插槽 

带有 name 名称的 slot 插槽就是具名插槽  

作用域插槽：  

三、自定义指令 

1、私有自定义指令

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

directives:{
	color:{
		// 为绑定到的 HTML 元素设置红色的文字
		bind(el){
			// 形参中的 el 是绑定了此指令的、原生的 DOM 对象
			el.style.color = 'pink'
		}
	}
}

注意：

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

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

directives: {
    color: {
      // 为绑定到的 HTML 元素设置红色的文字
      bind(el, binding) {
        // 形参中的 el 是绑定了此指令的、原生的 DOM 对象
        el.style.color = binding.value;
      },
      update(el, binding) {
        el.style.color = binding.value;
      },
    },
  },

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

color(el, binding) {
    el.style.color = binding.value;
},

2、全局自定义指令

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

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

一  叶  知  秋，奥  妙  玄  心