在 vue 中使用参数发出事件

Question

我正在尝试使用这样的参数发出函数。

 template: `
    <div class="searchDropDown">
    <div class="dropdown is-active">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
        <span>{{selectedItem}}</span>
      </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu" role="menu">
      <div class="dropdown-content">
        <a class="dropdown-item" v-for="item in drop" @click="$emit('select-menu-item($event)')">
          {{item.name}}
        </a>
      </div>
    </div>
  </div>
    </div>
  `

这是我试图将项目像参数一样传递给方法。

这是我尝试发出功能的组件：

 <search-component v-bind="searchProps" @select-menu-item="selectedITem($event)"></search-component>

这是我的方法：

 selectedITem(arg1) {
      console.log("cl")
      console.log(arg1)
    }

这里是如果我不尝试传递参数一切正常，所以我的方法 selectedITem 正在工作。当我尝试像这样传递参数时，什么也没发生，而且我没有收到任何错误。

原文由 user3348410 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

$emit() 中的以下参数是您发出的函数中的参数。

 $emit('select-menu-item', $event, 1, 2, 3, 4, "cupcakes")

并在您的组件方法中。

 selectMenuItem: function(evt, num1, num2, num3, num4, food){

}

而在你实际的组件标记中，你不需要添加参数，只需要写对方法的引用 而不带括号。

 <search-component v-bind="searchProps" @select-menu-item="selectMenuItem">

---

样本

 window.onload = function(){
 const component = function() {
    return {
       template: `
       <div>
         <button @click="$emit('click-me', 'foobar')">
            Click Me
         </button>
       </div>
       `,
       props: ["data"]
    }
 }

 new Vue({
       el: container,
       data: {},
       components: { "my-component": component(), },
       methods: {
          clickMe: function(str){
            console.log(str);
          }
       }
    });
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="container">
  <my-component :data=$data @click-me="clickMe"></my-component>
</div>

原文由 Abana Clara 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只是从@Albana Clara 添加更多答案。

您可以将参数与传递的事件合并。

例子：

 <search-component v-bind="searchProps" @select-menu-item="selectMenuItem('test', ...arguments)">

 selectMenuItem: function(a, b) {
  console.log(a + " " + b);
  // test foobar
}

原文由 Iqbal Tawakkal 发布，翻译遵循 CC BY-SA 4.0 许可协议