自定义指令函数传参

环境:

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函数,不能使用addEventListenerremoveEventListener,因为移除不成功会导致执行两次。

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函数,不能使用addEventListenerremoveEventListener,因为移除不成功会导致执行两次。与第一种类似

注意:

  • 指令参数中不能有空格
  • 指令参数中不能有字符串(需要在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的事件
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页