$emit an event from child to parent in vue.js, es6 语法

发布于10月28日

我是Vue的新手.js，我使用ES6语法和vue-class-component.我在try 将事件从子事件发送到其父事件时遇到问题.

我遵循了默认Vue的逻辑.js语法，但似乎无法让我的父母捕捉到子元素发出的事件.代码:

Child Component

我在每<li>个 node 上附加了一个click事件监听器，它调用一个发出事件的函数.事件侦听器是在父级上定义的.

 export default class HorizontalNavigation {

  handleClick (e) {
    e.preventDefault();
    // console.log(e.target.dataset.section);
    this.$emit('ChangeView', e.target.dataset.section);
  }

  render (h) {
    return (
      <div class={ style.horizontalNavigation } >
        <div class='sections-wrapper'>
          <div class={ style.sections }>
            <ol>
              <li><a on-click={ this.handleClick } href='#1' data-section='1' class='selected'>We are</a></li>
              <li><a on-click={ this.handleClick } href='#2' data-section='2'>Services</a></li>
              <li><a on-click={ this.handleClick } href='#3' data-section='3'>Cases</a></li>
              <li><a on-click={ this.handleClick } href='#4' data-section='4'>Studio</a></li>
              <li><a on-click={ this.handleClick } href='#5' data-section='5'>Career</a></li>
              <li><a on-click={ this.handleClick } href='#6' data-section='6'>Contact</a></li>
            </ol>

            <span class='filling-line' aria-hidden='true'></span>
          </div>
        </div>
      </div>
    );
  }
}

Parent Component

export default class ViewsContainer {

  ChangeView (data) {
    console.log(data);
  }

  render (h) {
      return (
        <div class={ style.restrictOverflow } >
          <HorizontalNavigation />
          <main class={ style.viewsContainer } on-ChangeView={ this.ChangeView     } >
            <SingleView dataSection='weare' id='1' class='selected' />
            <SingleView dataSection='services' id='2' />
            <SingleView dataSection='cases' id='3' />
            <SingleView dataSection='studio' id='4' />
            <SingleView dataSection='career' id='5' />
            <SingleView dataSection='contact' id='6' />
          </main>
        </div>
      );
    }
}

跟随vue.在js语法中，我应该能够通过从元素发出事件来从父元素监听子元素的事件，但是父元素似乎没有捕捉到事件.

我哪里做错了？

Emiting via an Event Bus

可以使用Vue非常简单地创建全局事件总线.在主组件中创建一个Vue实例，然后应用程序中的所有其他组件可以向其发送emit个事件，并使用on对这些事件做出react .

var bus = new Vue({}); var vm = new Vue({ methods: { changeView() { bus.$emit('ChangeView', e.target.dataset.section); } });

也可以emits 到$root，但不建议这样做.然而，如果你的app变得相当复杂，你可能想考虑使用VUS自己的状态管理系统，而不是vuex.

Listening for events

您可以使用$on在viewmodel中监听$emit并监听特定事件:

var vm = new Vue({ created() { this.$on('ChangeView', section => { console.log(section); }); } );

这也与您使用总线类似，但您只需参考总线即可:

bus.$on('ChangeView', ...);

您也可以直接在html中使用v-on:

<div v-on:ChangeView="doSomething"></div>

$emit an event from child to parent in vue.js, es6 语法

推荐答案

Emitting to parent directly

Emiting via an Event Bus

Listening for events

Vue.js相关问答推荐

检测Vue3/Vue-test-utils中的Vuex还原/Mutations

vuejs中如何获取数组总长度

v-on 的 .native 修饰符仅在组件上有效，但在  标签上使用

有没有办法初始化一个保留初始 HTML 的 Vue 对象

如何在 Nativescript 应用程序中调用 axios/api 调用

vuejs vue-cli 如何使用 console.log 而不会出现任何错误

实现登录命令并访问 vuex 存储

在 jest document.querySelector 中测试 vue 组件期间始终返回 null

Vue 和 Bootstrap Vue - 动态使用插槽

在 vuejs 中的图像中包含 router-link 标记

如何使用 TypeScript 在 Vue.js 中指定非react性实例属性？

Proxy代理在 Vue 3 的控制台中是什么意思？

如何在 Vue 中动态创建组件上获取更新的 $refs？

如何在 Vue 类组件中定义过滤器？

Vue Cli 3 不允许我在 Webpack 中处理 SVG

如何让 Vue 在 shadow dom 中工作

克隆元素并附加到 DOM 的正确方法

在 Chrome DevTools 中实时更改时 destruct 了 Vue.js 应用程序(Webpack 模板)的页面样式

v-if 未在计算(computed)属性上触发

使用 svelte js 的原因