이제 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('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1;
this.$emit('increment1',"这个位子是可以加参数的");//触发自定义increment1的函数。此处的increment1函数就是 incrementTotal1函数。
// this.$emit('increment2'); //此时不会触发自定义increment2的函数。
}
}
});
new Vue({
el: '#counter-event-example',
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")가 있습니다.
3.
4.increment가 실행될 때 사용자 지정 함수 increment2가 실행되지 않으므로 두 번째 버튼을 클릭해도 incrementTotal2 기능이 실행되지 않습니다.
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
vue cli webpack에서 sass를 사용하는 방법(자세한 튜토리얼)
에서 태그 하위 요소의 추가 및 할당 방법 구현 jQuery
위 내용은 vue.js에서 this.$emit을 사용하는 방법을 자세히 설명하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
