指令 Directive

同义词：命令、指示

v-[指令名] : [参数] = 值。 如：v-on:click=add

所有的 v-开头的都是指令，主要用于 DOM 操作。 封装为指令，可以减少重复的 DOM 操作

组件间的事件通信

两种方式

<!-- 利用父组件的修饰符 -->
<Button class="createTag" @click.native="createTag">新建标签</Button>

<!-- 将子组件的“事件”传递出去 -->
<button class="button" @click="$emit('click', $event)">
  <slot/>
</button>

自定义指令

两种方法：全局与局部

// 全局自定义指令 `v-log`，在XML标签处使用v-log即可使用
Vue.directive('log', {
  inserted: function (el) {
    el.addEventListener('click', () => console.log('x'))
  }
})

//组件中添加 directives 的选项，就只能在
new vue({
  directives: {
    log: {
      inserted: function (el) {
        el.addEventListener('click',()=>console.log('x'))
      }
  	}
	},
  [...]
})

模拟 v-on 指令

new Vue({
  directives: {
    el: '#app',
    on2: {
      bind(el, info) {
        console.log(el, info)
        el.addEventListener(info.arg, info.value)
      },
      unbind(el, info) {
        el.removeEventListener(info.arg, info.value)
      }
    }
  },
  template: `
    <button v-on2:click="hi">点我</button>
  `,
  methods: {
    hi() {
      console.log('hi')
    }
  }
})

//info 属性
{
    "name": "on2",
    "rawName": "v-on2:click",
    "expression": "hi",
    "arg": "click",
    "modifiers": {},
    "def": {}
}