[Vue.js] 컴포넌트 통신 방법 - 기본
1. 컴포넌트 통신
Vue.js에서 부모-자식 컴포넌트 관계는 props는 아래로, events 위로 라고 요약 할 수 있습니다. 부모는 props를 통해 자식에게 데이터를 전달하고 자식은 events를 통해 부모에게 메시지를 보냅니다. 어떻게 작동하는지 보겠습니다.
2. props 속성
사용방법
<app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>
예시
<div id="app">
<app-header v-bind:propsdata="message"></app-header>
</div>
<script>
var appHeader = {
template: '<h1>Header</h1>',
props: ['propsdata']
}
new Vue({
el: '#app',
components: {
'app-header': appHeader
},
data: {
message: 'hi'
}
})
</script>
<app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>
<div id="app">
<app-header v-bind:propsdata="message"></app-header>
</div>
<script>
var appHeader = {
template: '<h1>Header</h1>',
props: ['propsdata']
}
new Vue({
el: '#app',
components: {
'app-header': appHeader
},
data: {
message: 'hi'
}
})
</script>
3. event emit
버튼 클릭 이벤트
var appHeader = {
template: '<button v-on:click="passEvent">click me</button>',
methods: {
passEvent: function() {
this.$emit('pass'); //pass라는 이벤트
}
}
}
var appHeader = {
template: '<button v-on:click="passEvent">click me</button>',
methods: {
passEvent: function() {
this.$emit('pass'); //pass라는 이벤트
}
}
}
아래와 같이 이벤트 로그를 확인할 수 있습니다.
사용방법
<app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header>
예시
<div id="app">
<app-header v-on:pass="logText"></app-header>
</div>
<script>
var appHeader = {
template: '<button v-on:click="passEvent">click me</button>',
methods: {
passEvent: function() {
this.$emit('pass');
}
}
}
new Vue({
el: '#app',
components: {
'app-header': appHeader
},
methods: {
logText: function() {
console.log('hi');
}
}
});
</script>
4. 뷰 인스턴스에서의 this
자기자신을 가리키는 this
Author And Source
이 문제에 관하여([Vue.js] 컴포넌트 통신 방법 - 기본), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@imyourgenie/Vue.js-컴포넌트-통신-방법-기본저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)