집 > 기사 > 웹 프론트엔드 > vue.js에서 this.$emit을 사용하는 방법을 자세히 설명하세요.

vue.js에서 this.$emit을 사용하는 방법을 자세히 설명하세요.

亚连원래의: 2018-06-05 11:20:0510569검색

이제 vue.js에서 this.$emit에 대한 심층적인 이해를 공유하겠습니다. 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

vue.js의 this.emit 이해: this.emit('increment1', "This position can addparameter"); 실제로 해당 기능은 사용자 정의 기능을 트리거하는 것입니다.

예제를 보세요:

<!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 먼저 사용자 정의 구성 요소 버튼 카운터를 살펴보고 메서드를 바인딩합니다.

2 . 버튼을 클릭하면 increment 함수가 실행됩니다. increment에 this.$emit('increment1', "This position can addparameter")가 있습니다.

4.increment가 실행될 때 사용자 지정 함수 increment2가 실행되지 않으므로 두 번째 버튼을 클릭해도 incrementTotal2 기능이 실행되지 않습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

vue.js에서 this.$emit을 사용하는 방법을 자세히 설명하세요.

관련 기사