[混空Vue]201-11-15 4日目
Event Emit
イベントを子構成部品から親構成部品にアップグレードします.
v-on: 하위컴포넌트 이벤트 이름 = 상위컴포넌트메소드명子部品イベントが発生すると、親部品のメソッドが実行されます.<body>
<div id="app">
<!--
event emit
하위에서 상위 컴포넌트 : 이벤트를 올린다. event emit
하위 컴포넌트 이벤트가 발생했을 때 상위컴포넌트의 메서드가 실행된다.
<app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위컴포넌트의 메서드 이름"></app-header>
-->
<app-header v-on:pass="logText"></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
//버튼을 클릭하면 passEvent 라는 메소드를 실행하겠다.
template : '<button v-on:click="passEvent">click me</button>',
methods :{
passEvent : function (){ //메소드함수 passEvent 생성
this.$emit('pass'); // 위쪽에 보내는 이벤트 이름 pass 정의
}
}
}
new Vue({
el: '#app',
components: {
'app-header' : appHeader
},
methods:{
logText:function (){ // 이벤트 이름 logText 정의
console.log('hi!');
}
});
</script>
</body>
<body>
<div id="app">
<!--
event emit
하위에서 상위 컴포넌트 : 이벤트를 올린다. event emit
하위 컴포넌트 이벤트가 발생했을 때 상위컴포넌트의 메서드가 실행된다.
<app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위컴포넌트의 메서드 이름"></app-header>
-->
<app-header v-on:pass="logText"></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
//버튼을 클릭하면 passEvent 라는 메소드를 실행하겠다.
template : '<button v-on:click="passEvent">click me</button>',
methods :{
passEvent : function (){ //메소드함수 passEvent 생성
this.$emit('pass'); // 위쪽에 보내는 이벤트 이름 pass 정의
}
}
}
new Vue({
el: '#app',
components: {
'app-header' : appHeader
},
methods:{
logText:function (){ // 이벤트 이름 logText 정의
console.log('hi!');
}
});
</script>
</body>v-on:clickイベントをappHeaderコンポーネントのテンプレートに挿入し、appHeaderをクリックしたときにpassEventメソッドを実行します.passeEvent法は、emitを介して
passを伝達する. <app-header v-on:pass="logText"></app-header>app−headerは、pass emitこの親コンポーネントRootを実行する方法logTextを実行する.new Vueインスタンスを生成する方法logTextが定義される.<app-header>をクリックすると、コンソールウィンドウに「hi」が表示されます.
練習)
ボタンをクリックするたびに、Vueで定義したデータnumが1ずつ増加します.
<div id="app">
<app-content v-on:add="addNumber"></app-content>
</div>
<script>
var appContent = {
template: '<button v-on:click="increase">add</button>',
methods : {
increase : function(){
this.$emit('add')
}
}
}
new Vue({
el: '#app',
components: {
'app-content': appContent
},
methods:{
addNumber:function(){ //메소드함수 addNumber 정의
this.num++;
console.log(this.num);
}
},
data : {
num:10
}
});
</script>appContentコンポーネントのテンプレートで、
increaseメソッドをv-on:clickで実行します.increaseを実行すると、emitはaddを生成します. <app-content v-on:add="addNumber"></app-content> add emitがこの位相素子を動作させる方法addNumber.new Vueで定義されたメソッド
addNumberが実行されると、内部関数はnew Vueのデータnumを増加させ、コンソールウィンドウで付与する.<app-content>ボタンをクリックするたびに、コンソールウィンドウには11から1に増加した値が表示されます.
Reference
この問題について([混空Vue]201-11-15 4日目), 我々は、より多くの情報をここで見つけました https://velog.io/@mk928000000/혼공-Vue-2021-11-15-4일차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol