Vue自定义指令获取不到参数的原因及解决

// 检查是否有权限点
export function hasPermissionPoint(point) {
  let points = store.getters.roles.points
  if (points) {
    return points.some(it => it.toLowerCase() === point.toLowerCase())
  } else {
    return false
  }
}

import {hasPermissionPoint} from './utils/permission'

Vue.directive('perm',{
  inserted(el,binding){
      console.log(binding)
      if (!hasPermissionPoint(binding.value)) {
          el.parentNode.removeChild(el);
      }
  }
})

<a v-perm="'import'"
    class="el-button el-button--primary el-button--mini"
    title="导入">导入</a
                  >

<template>
  <div>
    <div class="study-directive" v-color='fontColor'>自定义指令总结:可以是变量
      <!-- <div class="study-directive" v-color='"blue"'>自定义指令总结：可以是字符串 -->
      <br />
      <div v-colors='fontColors'>注册多个自定义指令</div>
      <button @click="changeColor">改变颜色</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fontColor: "red",
      fontColors: "green"
    };
  },
// 注册一个局部指令 v-color
  directives: {
    color: {
      //被绑定元素插入父节点时调用（执行一次）
      inserted: function(el, bind) {
        el.style.color = bind.value;
      },
      //组件值更新时
      update: function(el, bind) {
        //当我们触发 changeColor 修改颜色值时，然而视图并没有更新，因为指令也存在生命周期 ，
        //所以如果需要视图更新，使用更新阶段
        el.style.color = bind.value;
      }
    },
    //存在多个指令时：
    colors: {
      inserted: function(el, bind) {
        el.style.color = bind.value;
      },
      update: function(el, bind) {
        el.style.color = bind.value;
      }
    }
  },
  methods: {
    changeColor() {
      this.fontColor = "green";
    }
  }
};
</script>

<style scoped>
.study-directive {
  margin: 200px 200px 10px;
  background: gray;
  padding: 40px;
  width: 500px;
  font-size: 18px;
}
</style>

//mian.js中
Vue.directive('color', {
  inserted: function (el, bind) {
    el.style.color = bind.value
  }
})

export default (Vue) => {
    Vue.directive('color', {
        inserted: function (el, bind) {
            el.style.color = bind.value
        },
        update: function (el, bind) {
            el.style.color = bind.value;
        }
    })
    Vue.directive('colors', {
        inserted: function (el, bind) {
            el.style.color = bind.value
        }
    })
}

import directive from "@/utils/directives.js";
Vue.use(directive)

 <div v-color='"red"'> 哈哈哈哈哈哈哈哈哈</div>

<p v-color:[direction]="200">content</p>

data() {
    return {
      direction: "left",
      fontColor: "red"
    };
  },
  directives: {
    color: {
      //被绑定元素插入父节点时调用（执行一次）
      inserted: function(el, bind) {
        console.log(bind);
        el.style.color = bind.value;
        el.style.position = "abosult";
        var s = bind.arg == "left" ? "left" : "top";
        el.style[s] = bind.value + "px";
       
      }
    }
  },

 <div v-color="{ color: 'white', text: 'hello!' }"></div>

directives: {
    color: { 
      inserted: function(el, bind) {
        console.log(bind)
      }
    }
  },