vue2中自定义指令传参和不传参的使用

最新推荐文章于 2025-02-27 23:09:46 发布

原创最新推荐文章于 2025-02-27 23:09:46 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

VUE2.JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Vue2中自定义指令的生命周期，包括bind、inserted、update、componentUpdated和unbind。示例代码展示了如何创建和使用带参数及不带参数的自定义指令，并通过v-if动态控制来观察bind和unbind的执行情况。

首先说下vue自定义指令的生命周期

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

在这里我只用到了自定义指令中的bind，insert和unbind。

以下是我的自定义指令的代码，有两个。，使用参数的时候必须要是用obj[key]的方式。否则没有效果。


//导出插槽
export const ss = {
    bind(dom,options){
        //只调用一次，指令第一次绑定到元素shi
        console.log(dom);
        console.log(options.arg);
        alert('第一次来的')
       
    },
    //当指令插入到父节点的时候调用，只要有父节点就行，父节点不一定是document
    inserted(dom,options){   //第一个值是指令绑定的dom，第二个值是与指令有关的一个对象，里面的value就是指令的值
        //如果是带参数的传参就只能用obj[key]这种方式，不能用obj.key（调用过出不来结果）
        dom[options.arg] = options.value
    },
    unbind(dom,options){
        alert(111)
        console.log(dom);
        console.log(options.value);
    }
}
export const color ={
    inserted(dom,options){
        //以下是不带动态参数的
        /* dom.style.backgroundColor = options.value */
        //带动态参数的
        dom.style[options.arg] = options.value
    }
}

这是在main.js中全局注册。

//可能会有多个自定义指令，引入所有的自定义指令 *代表所有
import * as direct from './directives'


//全局注册vue自定义指令
//Object.keys(direct)获得每个自定义指令的名称，然后forEach对每个自定义指令名称对应的自定义指令进行全局注册
 Object.keys(direct).forEach(key=>{
  Vue.directive(key,direct[key])
 })

这是使用自定义指令的vue文件注意这里使用了参数。

<template>
  <div>
    <el-button type="primary" @click="sorry = !sorry"
      >{{sorry===true?'显示图片':'隐藏图片'}}</el-button
    ><br/>
    <img
      class="imgSize"
      v-if="sorry"
      v-ss:src="defaultSrc"
      src="http:skjdalkjdklad.com"
      alt=""
    />
    <div v-color:backgroundColor="cc" class="ns"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultSrc:
        "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
      sorry: false,
      cc: "pink",
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {},
};
</script>
<style  scoped>
.imgSize {
  width: 200px;
  height: 200px;
}
.ns {
  height: 300px;
  width: 300px;
}
</style>

以下是效果,因为我这里使用了v-if的让其动态显示就是为了查看bind和unbind的效果，此时ss指令还没有，所已没有效果。

当我点击按钮,v-if为true，先触发bind钩子函数

然后走inserted函数

我们在点击按钮，v-if为false，触发unbind函数

元素消失，指令自然也就不存在了。

这是不带参数的代码，就修改了两处，一处使自定义指令处的代码。

//导出插槽
export const ss = {
  bind(dom, options) {
    //只调用一次，指令第一次绑定到元素shi
    console.log(dom);
    console.log(options.arg);
    alert("第一次来的");
  },
  //当指令插入到父节点的时候调用，只要有父节点就行，父节点不一定是document
  inserted(dom, options) {
    //第一个值是指令绑定的dom，第二个值是与指令有关的一个对象，里面的value就是指令的值
    //如果是带参数的传参就只能用obj[key]这种方式，不能用obj.key（调用过出不来结果）
    dom.src = options.value;
  },
  unbind(dom, options) {
    alert(111);
    console.log(dom);
    console.log(options.value);
  },
};
export const color = {
  inserted(dom, options) {
    //以下是不带动态参数的
    /* dom.style.backgroundColor = options.value */
    //带动态参数的
    dom.style.backgroundColor = options.value;
  },
};

一处是使用指令处的代码

<template>
  <div>
    <el-button type="primary" @click="sorry = !sorry"
      >{{sorry===true?'显示图片':'隐藏图片'}}</el-button
    ><br/>
    <img
    class="imgSize"
      v-if="sorry"
      v-ss="defaultSrc"
      src="http:skjdalkjdklad.com"
      alt=""
    />
    <div v-color="cc" class="ns"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultSrc:
        "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
      sorry: false,
      cc: "pink",
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {},
};
</script>
<style  scoped>
.imgSize {
  width: 200px;
  height: 200px;
}
.ns {
  height: 300px;
  width: 300px;
}
</style>

结果同上。