自定义指令函数传参

环境：

vue@2.6.6

问题：

1. 绑定函数传参
2. 传参多个多样
3. 参数动态变化

方案：

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;

注意：

• 可以使用addEventListener，但是其他生命周期里面removeEventListener移除不成功
• 要想移除事件可以在unbind生命周期里面el.onclick=null;，此办法并不能移除addEventListener的事件