Question

我有一个VueJS组件。如果有“事件”事件的处理程序，我需要显示其中的一部分。

<!-- here is my simple component -->
<cmp v-on:event='foo'></cmp>

<!-- here its template -->
<div id='cmpTemplate'>
  <p>Show it only if v-on:event is not empty</p>
<div>

添加其他属性并不是一个很好的解决方案。

Answer 1

我将为附加的v-on：event定义并发送vOnStatus = true 然后对要显示的元素进行v-if =“ vOnStatus”

Answer 2

组件具有$listeners属性，该属性是绑定到v-on上的组件的函数的字典，我想您可以为此使用它。

来自https://vuejs.org/v2/guide/components-custom-events.html：

{
  focus: function (event) { /* ... */ }
  input: function (value) { /* ... */ },
}

但是，我建议您遵循@kat建议，而不要这样做。感觉这不是为这个目的而设计的，只是想一想：您是否想拥有一个根据其是否被其他对象查看而改变其行为的组件？除非您设计量子粒子，否则这并不是我脑海中应该如何工作的组件。

我刚刚意识到我以前见过像您想要的行为（尽管我仍然认为不应该为按钮做这些操作，就像您的注释所建议的那样）-但这也许会对您更好。看一下：https://bootstrap-vue.js.org/docs/components/table这是一个表，具有一个provider道具，可以作为一个函数。无论是否设置provider，它都会改变行为-如果不设置，它不会调用该函数，而是使用item属性来获取数据。

这是通过使用v-bind而不是v-on来完成的，但是绑定完成了。这可能是更好的方法，因为您不必再使用$listeners，并且可以根据是否将属性设置为函数还是null

来了解行为的变化。

仅在该组件连接了v-on的情况下如何显示VueJS组件的元素？

2 个答案: