VUE3 개발 시작하기: Vue.js를 사용하여 구성 요소 간 통신

최신 웹 애플리케이션의 복잡성과 규모가 계속 증가함에 따라 구성 요소화된 프레임워크가 점점 더 중요해지고 있습니다. Vue.js는 웹 애플리케이션 구축에 구성 요소화된 접근 방식을 사용하는 인기 있는 JavaScript 프레임워크입니다. 구성 요소화를 통해 재사용 및 유지 관리가 가능한 코드 블록을 생성하고 이를 복잡한 기능을 갖춘 완전한 애플리케이션으로 결합할 수 있습니다. 이 기사에서는 VUE3의 구성 요소 간 통신에 대해 설명합니다. 이는 구성 요소가 서로 정보를 전달하여 함께 작동하고 작업을 완료할 수 있도록 하기 때문에 핵심 기술입니다.

1. Props
   VUE3에서는 Props를 사용하여 상위 구성 요소에서 하위 구성 요소로 데이터를 전달할 수 있습니다. 상위 구성 요소에서는 하위 구성 요소 태그에 속성을 추가할 수 있고, 하위 구성 요소에서는 이 속성을 사용할 수 있습니다. 다음은 컴포넌트를 사용하는 예입니다.

Vue.component('child-component',{
    props: ['message'],
    template: '<div>{{ message }}</div>'
});

var app = new Vue({
    el: '#app',
    data: {
        parentMessage: 'Hello from parent'
    }
});

이 예에서는 'parentMessage' 값을 받을 수 있는 'props' 속성을 포함하는 하위 컴포넌트를 정의합니다. 상위 구성 요소에서는 'v-bind'를 통해 하위 구성 요소의 속성에 'parentMessage'를 바인딩합니다.

<div id="app">
    <child-component v-bind:message="parentMessage"></child-component>
</div>

여기서 'v-bind' 지시문은 VUE3에 'parentMessage' 값을 하위 구성 요소의 속성에 바인딩하도록 지시합니다. '메시지' 속성.

2. $emit
   VUE3의 상위 구성요소는 '$emit' 메소드를 사용하여 하위 구성요소에 이벤트를 보낼 수 있습니다. 하위 구성요소는 '$on' 메소드를 사용하여 이러한 이벤트에 등록할 수 있습니다. 다음은 이벤트 보내기 및 받기의 예입니다.

Vue.component('child-component',{
    template: '<button v-on:click="notify">Click me</button>',
    methods:{
        notify: function(){
            this.$emit('clicked');
        }
    }
});

var app = new Vue({
    el: '#app',
    methods:{
        handleClick: function(){
            alert('Button clicked');
        }
    }
});

이 예에서 하위 구성 요소 'child-comComponent'는 'clicked' 이벤트라는 이벤트를 보내기 위해 '$emit'를 사용하는 'notify' 메서드를 정의합니다. 상위 구성 요소에서는 'v-on' 지시문을 사용하여 'clicked' 이벤트를 'handleClick' 메서드에 바인딩할 수 있습니다.

<div id="app">
    <child-component v-on:clicked="handleClick"></child-component>
</div>

사용자가 하위 구성 요소의 버튼을 클릭하면 'notify'가 트리거됩니다. 메서드를 실행하면 'clicked' 이벤트가 전송됩니다. 그러면 상위 컴포넌트의 'handleClick' 메소드가 호출되고 팝업 상자가 표시됩니다.

3. 이벤트 버스
   때로는 여러 구성 요소 간에 데이터나 이벤트를 공유해야 할 수도 있습니다. 이때 통신을 위해 Event Bus를 사용할 수 있습니다. 이벤트 버스는 애플리케이션에서 이벤트와 데이터를 관리하는 데 사용되는 VUE3 인스턴스입니다. 다음은 이벤트 버스 사용의 예입니다.

var bus = new Vue();

Vue.component('component-a',{
    template: '<button v-on:click="triggerEvent">Click me</button>',
    methods:{
        triggerEvent: function(){
            bus.$emit('event-from-a');
        }
    }
});

Vue.component('component-b',{
    template: '<div>{{ message }}</div>',
    data:function(){
        return {
            message: ''
        };
    },
    created:function(){
        var _this = this;
        bus.$on('event-from-a',function(){
            _this.message = 'Received event from Component A';
        });
    }
});

var app = new Vue({
    el: '#app'
});

이 예에서는 'bus'라는 VUE3 인스턴스를 만든 다음 이를 두 구성 요소에서 사용합니다. 'comComponent-a' 구성 요소는 'event-from-a'라는 이벤트를 트리거하여 'bus' 인스턴스로 보냈고, 'comment-b' 구성 요소는 'event-from-a'를 'bus'에 등록했습니다. 인스턴스 이벤트를 실행하고 이벤트가 발생하면 'data'의 'message' 속성을 업데이트합니다.

위의 실습을 통해 VUE3 구성 요소 통신을 사용하면 상위 구성 요소와 하위 구성 요소 간에 데이터와 이벤트를 쉽게 전송할 수 있음을 배울 수 있습니다. 동시에 이벤트 버스는 여러 구성 요소 간에 데이터와 이벤트를 공유하는 간단한 방법을 제공합니다. 실제로 개발 효율성을 높이고 필요한 기능을 구현하려면 프로젝트의 실제 상황에 따라 컴포넌트 통신 방법을 유연하게 사용할 필요가 있습니다.

위 내용은 VUE3 개발 시작하기: Vue.js를 사용하여 구성 요소 간 통신의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!