如何從 Vue.js 功能組件發出事件？

Question

作為問題的標題， this上下文在功能組件中不可用。 所以如果我必須發出一個事件，我該怎么做呢？

例如在下面的代碼片段中：

<template functional>
    <div>
        <some-child @change="$emit('change')"></some-child>
    </div>
</template>

我的功能組件沒有this上下文，因此$emit不可用。 我怎樣才能冒泡這個活​​動？

Answer 1

子組件

<template functional>
  <button @click="listeners['custom-event']('message from child')">
    Button from child
  </button>
</template>

父組件

<template>
  <div>
    <child-component @custom-event="call_a_method" />
  </div>
</template>

在代碼沙箱上查看它的實際操作

你想從 vue 實例中發出事件嗎？

export default {
  functional: true,
  render(createElement, { listeners }) {
    return createElement(
      "button",
      {
        on: {
          click: event => {
            const emit_event = listeners.event_from_child;
            emit_event("Hello World!Is this the message we excpected? :/");
          }
        }
      },
      "Pass event to parent"
    );
  }
};

另請參閱此處的沙盒示例

Answer 2

這在將屬性和事件傳遞給子元素/組件的文檔中進行了解釋：

如果您使用基於模板的功能組件，您還必須手動添加屬性和偵聽器。 由於我們可以訪問各個上下文內容，因此我們可以使用data.attrs傳遞任何 HTML 屬性和listeners器（ data.on的別名）來傳遞任何事件偵聽器。

在最基本的層面上，您可以像這樣委派所有偵聽器：

<some-child v-on="listeners"></some-child>

如果您只想綁定change偵聽器，您可以執行以下操作：

<some-child @change="listeners.change"></some-child>

但是如果listeners.change是 undefined/null （未提供給功能組件），這將失敗。

如果您需要處理沒有change偵聽器的情況，那么您可以這樣做：

<some-child @change="listeners.change && listeners.change($event)"></some-child>

否則您將不得不通過手動編寫渲染函數來解決，因為我認為不可能有條件地將change偵聽器分配給功能組件模板中的<some-child> 。 （或者也許你可以？我不確定。）

Answer 3

如果您想有條件地傳遞事件偵聽器，您可以在功能組件模板中執行此操作，如下所示：

v-on="listeners.change ? { change: listeners.change } : null"

這里討論了有條件地附加偵聽器的問題

Answer 4

帶有 jsx 的組件：

export default {
  name: "MyText",
  functional: true,// functional component
  props: {
    value: {
      type: [String, Number],
      default: ""
    }
  },
  render(h, context) {
    const { props } = context;

    // with jsx

    // return (
    //   <button
    //     onClick={() => {
    //       console.log(context.listeners);
    //       context.listeners.input(Math.random().toString(36));
    //       context.listeners["my-change"](Math.random().toString(36));
    //       context.data.on.change(Math.random().toString(36));
    //     }}
    //   >
    //     {props.value}
    //   </button>
    // );

    // or use h function
    return h(
      "h1",
      {
        on: {
         // emit some event when click h1
          click: () => {
            // has value prop has has input event auto
            // event name come  what event u listen in parent component
            console.log(context.listeners);
            context.listeners.input(Math.random().toString(36));
            context.listeners["my-change"](Math.random().toString(36));
            context.data.on.change(Math.random().toString(36));
          }
        }
      },
      props.value
    );
  }
};

conext.listeners只是context.data.on的別名。 在父組件中，您應該聽my-change和change ，否則有錯誤。

組件內的事件名稱來自您在父組件中偵聽的事件

<MyText
  v-model="value"
  @change="change"
  @my-change="myChange"
  @u-change="uChange"
/>

vue 2.6.11 運行良好。

在線查看代碼框

Answer 5

家長：

<Child @onFunction="handleFunction">

這是子組件：

孩子

<template functional>
    <div>
        <some-child @change="execute"></some-child>
    </div>
</template>

methods:
  execute(){
   @emit("onFunction")
  }