質問

私はVue.jsのかなり新しいユーザーで、ES6構文で vue-class-component . 私は、子からその親にイベントを発行しようとしているときに問題があります。

Vue.jsのデフォルトの構文のロジックに従いましたが、子から発信されたイベントを親がキャッチすることができないようです。コード

子コンポーネント

クリックイベントリスナーを各 <li> この関数がイベントを発行する関数を呼び出します。イベントリスナーは親に定義されています。

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

親コンポーネント

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の構文に従えば、要素からイベントを発することで、親から子のイベントを聞くことができるはずなのですが、親がイベントをキャッチしていないようなのです。

どこで間違っているのでしょうか？

どうすればいいですか？

必要なのは $emit を受け取りたいビューモデル上で $emit を使用します。 bus または https://vuex.vuejs.org/ .

親に直接発光させる

最も簡単な方法は、単純に $emit を子コンポーネントから親コンポーネントに直接渡すことができます。

this.$parent.$emit('ChangeView', e.target.dataset.section);

これは OK しかし、長いコンポーネントの連鎖がある場合は、次のようにする必要があります。 $emit をそれぞれの $parent を連鎖させる。

イベントバス経由での発信

Vueを使用すると、非常に簡単にグローバルなイベントバスを作成することができます。メインコンポーネントでVueのインスタンスを作成すると、アプリケーション内の他のすべてのコンポーネントが、Vueのインスタンスを使用することで、グローバルなイベントバスを作成できます。 emit イベントを送信し on を使用して、それらのイベントに反応することができます。

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

に発することも可能です。 $root が、これはあまりお勧めできません。しかし、もし app が非常に複雑になる場合、Vues 独自の状態管理システムの使用を検討することができます。 ビューエックス 代わりに

イベントのリスニング

をリッスンすることができます。 $emit を使用して、ビューモデルで $on で、特定のイベントをリッスンします。

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

バスを使っている場合も同様ですが、代わりにバスを参照するだけです。

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

また、HTML内で直接使用する場合は v-on :

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