vue.jsでのthis.$emitの使い方を詳しく解説-jsチュートリアル-php.cn

vue.jsでのthis.$emitの使い方を詳しく解説

亚连

リリース： 2018-06-05 11:20:05

オリジナル

10559 人が閲覧しました

ここで、vue.js の this.$emit について詳しく説明します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

vue.js の this.emit の理解: this.emit('increment1', "この位置はパラメーターを追加できます"); 実際、その機能はカスタム関数をトリガーすることです。

例を見てください:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<script src="vue.js"></script>
<body>
<p id="counter-event-example">
 <p>{{ total }}</p>
 <button-counter v-on:increment1="incrementTotal1"></button-counter>
 <button-counter v-on:increment2="incrementTotal2"></button-counter>
</p>
</body>
<script>
 Vue.component(&#39;button-counter&#39;, {
 template: &#39;<button v-on:click="increment">{{ counter }}</button>&#39;,
 data: function () {
  return {
  counter: 0
  }
 },
 methods: {
  increment: function () {
  this.counter += 1;
  this.$emit(&#39;increment1&#39;,"这个位子是可以加参数的");//触发自定义increment1的函数。此处的increment1函数就是 incrementTotal1函数。
//  this.$emit(&#39;increment2&#39;); //此时不会触发自定义increment2的函数。
  }
 }
 });
 new Vue({
 el: &#39;#counter-event-example&#39;,
 data: {
  total: 0
 },
 methods: {
  incrementTotal1: function (e) {
  this.total += 1;
  console.log(e);
  },
  incrementTotal2: function () {
  this.total += 1;
  }
 }
 })
</script>
</html>

ログイン後にコピー

上記の例をさらに分析します:

1 まず、カスタムコンポーネントの button-counter を見て、メソッド

2 をバインドします。ボタンをクリックすると、increment

3 に this.$emit('increment1', "この位置にパラメータを追加できます") という関数が実行されます。これは、incrementTotal1 関数です。4. カスタム関数 increment2 は、increment の実行時にトリガーされないため、2 番目のボタンをクリックしても、incrementTotal2 関数は実行されません。

上記は私があなたのためにまとめたものです。

vue cli webpackでsassを使用する方法(詳細なチュートリアル)

jQueryでPタグのテキスト値を変更する方法

タグのサブ要素の追加および割り当てメソッドを実装するjQuery

以上がvue.jsでのthis.$emitの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。