Getting Started with VUE3 Development: Using Vue.js to communicate between components

As modern web applications continue to grow in complexity and scale, componentized frameworks are becoming increasingly important. Vue.js is a popular JavaScript framework that uses a componentized approach to building web applications. Componentization allows us to create reusable and maintainable code blocks and combine them into complete applications with complex functionality. In this article, we will discuss VUE3’s inter-component communication. This is a key technology because it allows components to pass information to each other so that they can work together and complete tasks.

1. Props
   In VUE3, we can use Props to pass data from parent components to child components. In the parent component, we can add the attribute to the child component tag, and in the child component, we can use this attribute. The following is an example of using the component:

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

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

In this example, we define a child component that contains a 'props' attribute, which can receive the value of 'parentMessage' . In the parent component, we bind 'parentMessage' to the property of the child component through 'v-bind':

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

The 'v-bind' directive here tells VUE3 to bind the value of 'parentMessage' to the 'message' property of the child component.

2. $emit
   Parent components in VUE3 can use the '$emit' method to send events to child components. Child components can register for these events using the '$on' method. The following is an example of sending and receiving events:

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');
        }
    }
});

In this example, the child component 'child-component' defines a 'notify' method, which uses '$emit' to send a Event named 'clicked'. In the parent component, we can use the 'v-on' directive to bind the 'clicked' event to the 'handleClick' method:

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

When the user clicks the button of the child component, it will trigger 'notify' Method that causes the 'clicked' event to be sent. Then, the 'handleClick' method in the parent component will be called and a popup box will be displayed.

3. Event Bus
   Sometimes you may need to share data or events between multiple components. At this time we can use Event Bus for communication. Event Bus is a VUE3 instance used to manage events and data in the application. Here is an example of using Event Bus:

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'
});

In this example, we create a VUE3 instance named 'bus' and then use it in two components. The 'component-a' component triggers an event named 'event-from-a' and sends it to the 'bus' instance, and the 'component-b' component registers the 'event-from-a' in the 'bus' instance event, and updates the 'message' property in 'data' when the event fires.

Through the above practice, we can learn that using VUE3 component communication can easily transfer data and events between parent and child components. At the same time, Event Bus provides a simple method to share data between multiple components. and events. In practice, it is necessary to flexibly use component communication methods according to the actual situation of the project to improve development efficiency and achieve necessary functions.

The above is the detailed content of Getting Started with VUE3 Development: Using Vue.js to communicate between components. For more information, please follow other related articles on the PHP Chinese website!