代码之家 › 专栏 › 技术社区 › user3348410

在vue中使用参数发出事件

components vue.js javascript

user3348410 · 技术社区 · 6 年前

我试着用这样的参数来发射函数。

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)
    }

选择项 他正在工作。当我尝试像这样传递参数时,什么也没发生,我没有得到任何错误。

1 回复 | 直到 6 年前

105

Abana Clara 4 年前

中的以下参数 $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>

Iqbal Tawakkal 4 年前

只是添加了来自@Albana Clara的更多答案。

例子:

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

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

推荐文章

code4cash · 声明了“string”,但从未读取其值

2 年前

Srinath Macherla · 如何删除ant design甜甜圈图表中的图例

2 年前

Federico Gentile · 如何在数组中无限循环并以角度显示值?

2 年前

Ren Jitsm · React useeffect显示组件安装2次

2 年前

Aden Lee · 如何在React中使用filter()控制JSX组件?

2 年前

Maria · 如何将DatePicker(@mui)值提升到父组件?

2 年前

Audiosleef · 根据搜索结果显示列表

6 年前

SamohtVII · 使用组件区域显示各种内容

6 年前

yhc44 · Vue。js组件父事件

6 年前

Chris · 在Vue中动态添加不同组件

6 年前