自定义指令函数传参

xiaojinglyd

墨衍会员 · AI 创作全网分发码龄9年

关注

转载最新推荐文章于 2026-10-01 15:09:45 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

FPGA DMA IP核使用指南数据传输：支持从源地址到目标地址的数据传输。中断管理：提供中断信号，便于CPU处理传输完成事件。传输控制：支持传输大小、方向和暂停/恢复控制。阅读详情

环境：

vue@2.6.6

问题：

绑定函数传参
传参多个多样
参数动态变化

方案：

1. 采用传对象方式(binding.value)

<el-button v-mydirective="{ fn: myFn, args: x }" type="text" size="small">测试</el-button>


const mydirective = {
  inserted: function (el, binding) {
    const args = binding.value.args;
	const fn = binding.value.fn;
	el.onclick = fn(args);
  }
}
export default mydirective

以上解决了问题1. 绑定函数传参，对于问题2. 传参多个多样可以给args一个对象，或者用数组

<el-button v-mydirective="{ fn: myFn, args: {x, y} }" type="text" size="small">测试</el-button>
<script>
export default {
    data() {
       return {
           x: 1,
           y: 2,
       } 
    },
    methods: {
        myFn({x, y}) {
            console.log(x);
            console.log(y);
        }
    }
}
</script>

const mydirective = {
  inserted: function (el, binding) {
    const args = binding.value.args;
	const fn = binding.value.fn;
	el.onclick = fn(args);
  }
}
export default mydirective;

<el-button v-mydirective="{ fn: myFn, args: [x, y] }" type="text" size="small">测试</el-button>
<script>
export default {
    data() {
       return {
           x: 1,
           y: 2,
       } 
    },
    methods: {
        myFn(x, y) {
            console.log(x);
            console.log(y);
        }
    }
}
</script>

const mydirective = {
  inserted: function (el, binding) {
    const args = binding.value.args;
	const fn = binding.value.fn;
	el.onclick = fn(...args);
  }
}
export default mydirective;

对于问题3. 参数动态变化，需要增加钩子函数update或者componentUpdated

<el-button v-mydirective="{ fn: myFn, args: [x, y] }" type="text" size="small">测试</el-button>
<script>
export default {
    data() {
       return {
           x: 1,
           y: 2,
       } 
    },
    methods: {
        myFn(x, y) {
            console.log(x);
            console.log(y);
        }
    }
}
</script>

const mydirective = {
  inserted: function (el, binding) {
    const args = binding.value.args;
	const fn = binding.value.fn;
	el.onclick = fn(...args);
  },
  update: function (el, binding) {
    const args = binding.value.args;
	const fn = binding.value.fn;
	el.onclick = fn(...args);
  },
}
export default mydirective;

update时候重置绑定的onclick函数，不能使用addEventListener、removeEventListener，因为移除不成功会导致执行两次。

2. 指令的参数(binding.arg)

<el-button v-mydirective:[x]="myFn" type="text" size="small">测试</el-button>


const mydirective = {
  inserted: function (el, binding) {
    const args = binding.arg;
	const fn = binding.value;
	el.onclick = fn(args);
  }
}
export default mydirective

以上解决了问题1. 绑定函数传参，对于问题2. 传参多个多样可以给指令参数一个对象，或者用数组

<el-button v-mydirective:[{x,y}]="myFn" type="text" size="small">测试</el-button>
<script>
export default {
    data() {
       return {
           x: 1,
           y: 2,
       } 
    },
    methods: {
        myFn({x, y}) {
            console.log(x);
            console.log(y);
        }
    }
}
</script>

const mydirective = {
  inserted: function (el, binding) {
    const args = binding.arg;
	const fn = binding.value;
	el.onclick = fn(args);
  }
}
export default mydirective;

<el-button v-mydirective:[[x,y]]="myFn" type="text" size="small">测试</el-button>
<script>
export default {
    data() {
       return {
           x: 1,
           y: 2,
       } 
    },
    methods: {
        myFn(x, y) {
            console.log(x);
            console.log(y);
        }
    }
}
</script>

const mydirective = {
  inserted: function (el, binding) {
    const args = binding.arg;
	const fn = binding.value;
	el.onclick = fn(...args);
  }
}
export default mydirective;

对于问题3. 参数动态变化，需要增加钩子函数update或者componentUpdated

<el-button v-mydirective:[[x,y]]="myFn" type="text" size="small">测试</el-button>
<script>
export default {
    data() {
       return {
           x: 1,
           y: 2,
       } 
    },
    methods: {
        myFn(x, y) {
            console.log(x);
            console.log(y);
        }
    }
}
</script>

const mydirective = {
  inserted: function (el, binding) {
    const args = binding.arg;
	const fn = binding.value;
	el.onclick = fn(...args);
  },
  update: function (el, binding) {
    const args = binding.arg;
	const fn = binding.value;
	el.onclick = fn(...args);
  },
}
export default mydirective;

update时候重置绑定的onclick函数，不能使用addEventListener、removeEventListener，因为移除不成功会导致执行两次。与第一种类似

注意：

指令参数中不能有空格
指令参数中不能有字符串(需要在data中定义成变量才可以使用)

3. 采用传箭头函数(binding.value)

<el-button v-mydirective="() => myFn(x)" type="text" size="small">测试</el-button>


const mydirective = {
  inserted: function (el, binding) {
	const fn = binding.value;
	el.onclick = fn;
  }
}
export default mydirective

以上解决了问题1. 绑定函数传参和问题3. 参数动态变化，对于问题2. 传参多个多样可以很随意了

<el-button v-mydirective="() => myFn({x,y})" type="text" size="small">测试</el-button>
<script>
export default {
    data() {
       return {
           x: 1,
           y: 2,
       } 
    },
    methods: {
        myFn({x, y}) {
            console.log(x);
            console.log(y);
        }
    }
}
</script>

const mydirective = {
  inserted: function (el, binding) {
	const fn = binding.value;
	el.onclick = fn;
  }
}
export default mydirective;

<el-button v-mydirective="() => myFn(x,y)" type="text" size="small">测试</el-button>
<script>
export default {
    data() {
       return {
           x: 1,
           y: 2,
       } 
    },
    methods: {
        myFn(x, y) {
            console.log(x);
            console.log(y);
        }
    }
}
</script>

const mydirective = {
  inserted: function (el, binding) {
	const fn = binding.value;
	el.onclick = fn;
  }
}
export default mydirective;

注意：