2021-07-30

自定义指令

自定义组件的原因是内置组件不满足自己的需求

自定义全局组件放在vue实例对象外边

<template>
<div>
		//使用自定义组件
		<div id="hook" v-focus=’msg‘></div>
</div>
</template>

<script>
	// 注册一个全局自定义指令 `v-focus`
	//第一个参数是指令名称，不加v-，
	//第二个参数是个对象，包裹相关方法的函数
	Vue.directive('focus', {
	  // 当被绑定的元素插入到 DOM 中时……
 	 inserted: function (el，binding) {
 	   			// 聚焦元素
	    		el.focus()，
	    		//通过binding获取绑定的值
	    		el.style.backgroundColor=binding.value.color
	  }
	})
    new Vue({
      el: '#app',
      data: function() {
        return { 
			msg:{color:blue}
		 }
      }
    })
  </script>
注：
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下常用 property：
	name：指令名，不包括 v- 前缀。
	value：指令的绑定值，

自定义局部组件放在vue实例对象中

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

区别

自定义组件只在当前组件有效
全局组件在所有组件都有效