Vue.js 有条件地将事件侦听器和处理程序附加到Vue组件

我有一个Vue组件，在我的应用程序中有好几个地方使用。在某些情况下，我需要使用特定功能处理单击事件，如：

但是，我只想在需要时附加这个处理程序，这样它就不会在不需要时不必要地触发

我尝试过向组件传递一个道具并有条件地附加处理程序，如下所示：

然后在道具中，我指定：

ischecked{
类型：布尔型，
必填项：false，
默认值：false，
}

但是，我的

checkNav

函数从未启动，我已经在Vue开发工具中再次检查了

isCheckNeeded

是否正确

---

这种条件检查是不可能的，还是不推荐？有没有更好的方法可以有条件地附加事件侦听器/处理程序？

您可以使用

v-if

语句来呈现

div

，使用或不使用click处理程序

<div v-if="isCheckedNeeded" @click="checkNav"></div>
<div v-else></div>

---

您可以使用

v-if

语句来呈现包含或不包含单击处理程序的

div

<div v-if="isCheckedNeeded" @click="checkNav"></div>
<div v-else></div>

使用

@click=“enabled&&clickHandler（$event）”

。

newvue({
el:“#应用程序”，
数据（）{
返回{
已启用：true
}
},
方法：{
clickHandler:函数（）{
console.info（'clicked'）
}
}
})

测试：{{已启用}}

使用

@click=“enabled&&clickHandler（$event）”

。

newvue({
el:“#应用程序”，
数据（）{
返回{
已启用：true
}
},
方法：{
clickHandler:函数（）{
console.info（'clicked'）
}
}
})

测试：{{已启用}}

查看您的模板是如何编译的，以了解问题的原因可能会有所帮助

当

v-on

接收到一个方法名时，

vue模板编译器将其编译成一个方法查找，其中解析的方法成为事件处理程序。例如，您的模板
被编译到此呈现函数中：

与（此）{
返回_c（“div”，{on:{click:checkNav}}）
}

另一方面，
被编译成：

与（此）{
返回c（“div”{
关于：{
单击：函数（$event）{
是否已检查？检查导航：空
},
},
})
}

注意以下几点：

表达式包装在一个匿名函数中，该函数将成为事件处理程序
表达式的结果是方法名（与方法调用相反）或
null
。评估方法名实际上是不可操作的

解决方案1：将方法名称更改为方法调用
这可能是最简单的解决方案，但它的缺点是处理程序总是在单击时被调用（尽管falsy
ischeckineed
会导致提前返回）



解决方案2：使用动态事件
这稍微复杂一些，但它的优点是仅在必要时注册事件处理程序。当
ischeckineed
为false时，事件处理程序将自动注销


...
导出默认值{
计算：{
clickEvent（）{
返回此项。IsCheckKneeded？：单击：null
}
},
}


Vue.component（'my-component'）{
模板：``，
道具：{
Ischecked:布尔值
},
计算：{
clickEvent（）{
返回此项。IsCheckKneeded？：单击：null
}
},
方法：{
checkNav（）{
console.log（'checkNav'）
}
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
我被质问：错
}
}
})
。单击区域{
边框：实心1px；
填充：2rem；
保证金：1rem；
}

切换单击处理程序
ischeckineded={{ischeckineded}
点击我！
单击忽略
查看您的模板是如何编译的，以了解问题的原因可能会有所帮助

当
v-on
接收到一个方法名时，
vue模板编译器将其编译成一个方法查找，其中解析的方法成为事件处理程序。例如，您的模板
被编译到此呈现函数中：

与（此）{
返回_c（“div”，{on:{click:checkNav}}）
}

另一方面，
被编译成：

与（此）{
返回c（“div”{
关于：{
单击：函数（$event）{
是否已检查？检查导航：空
},
},
})
}

注意以下几点：

表达式包装在一个匿名函数中，该函数将成为事件处理程序
表达式的结果是方法名（与方法调用相反）或
null
。评估方法名实际上是不可操作的

解决方案1：将方法名称更改为方法调用
这可能是最简单的解决方案，但它的缺点是处理程序总是在单击时被调用（尽管falsy
ischeckineed
会导致提前返回）



解决方案2：使用动态事件
这稍微复杂一些，但它的优点是仅在必要时注册事件处理程序。当
ischeckineed
为false时，事件处理程序将自动注销


...
导出默认值{
计算：{
clickEvent（）{
返回此项。IsCheckKneeded？：单击：null
}
},
}


Vue.component（'my-component'）{
模板：``，
道具：{
Ischecked:布尔值
},
计算：{
clickEvent（）{
返回此项。IsCheckKneeded？：单击：null
}
},
方法：{
checkNav（）{
console.log（'checkNav'）
}
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
我被质问：错
}
}
})
。单击区域{
边框：实心1px；
填充：2rem；
保证金：1rem；
}