1. Introduction
Khai works with VueJS, we will certainly work with components and also because it is necessary for us to know how to communicate between components. Like Angular or React, VueJS also has its own implementation cable, as far as I can see it is easy to understand and apply. We will see more in detail later.
2. Details
We have 4 ways to transfer data between components in VueJS, namely: Transfer data from parent to child via Props, propagate from child to father via Emit event, transfer between unrelated components via Event bus and how finally through VueX Store (Like the store in Redux).
Pass from father to child through Props: Let’s see the example below we will have a parent component, acting as a child component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <template> <div id="app"> <ComponentFirst msg="Welcome to Your Vue.js App"/> //OR <ComponentFirst :msg="Welcome to Your Vue.js App"> //OR <ComponentFirst v-bind:msg="Welcome to Your Vue.js App"></ComponentFirst> </div> </template> <script> import ComponentFirst from './components/componentFirst'; export default { name: 'App', components: { ComponentFirst } } </script> |
This time we will pass msg to his son, this is the props you want to name as you like. It can transmit data types to his son and when the father’s data changes, his son will also be automatically updated.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <template> <div>{{msg}}</div> </template> <script> export default { name: "Component first", props: { msg: String } }; </script> |
Above is the code of the son who received the data from the parent he passed to, you note that props are only transmitted one way from the child to the father – not the other way. Because the father may also pass this data to more children, a son may change his father’s data. This is integrity, just like ReactJS you can transfer data one way down, can not directly change the data.
When compared to Angular 2+, VueJS and React seem to be easier to pass props, because there is no need to declare more. @@
Passing data from the child to the father: First let’s take a look at his father’s code, in this section let’s pay attention to how it receives events offline.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <template> <div id="app"> <ComponentFirst @inputData="updateMessage"/> <h3>{{message}}</h3> </div> </template> <script> import ComponentFirst from './components/componentFirst'; export default { name: 'App', components: { ComponentFirst }, data() { return { message: 'Message default.' } }, methods: { updateMessage(mes) { this.message = mes; } } } </script> |
In the parent Component, we will need @inputData to match the key that our child component emit up. And need to attach a parent method to be able to listen when the Emit child an event is up. When emit up can transmit more data or not need to be up. Similarly, the father needs parameters or not.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <template> <div> <input placeholder="Enter Text Here" v-model="tempMessage" /> <div> <button @click="sendMessage">@Emit event</button> </div> </div> </template> <script> export default { name: "ComponentFirst", data() { return { tempMessage: '' } }, methods: { sendMessage() { this.$emit('inputData', this.tempMessage); this.tempMessage = ''; } } }; </script> |
As you can clearly see in the Component, we will emit data like.
In this part, Anular shows that I need both @Output and Emit while React does not need to declare more emit. VueJS also needs emit but at least, I find it more compact than Angular @@. In general, I have code through React, Angular and VueJS, I find VueJS and ReactJS easier to code than Angular. Angular must have been that easy for a super huge project. @@
Transferring data between components and Event bus: First you need to know that the Event bus is like an external service to store data temporarily. He’ll save it there and there will be a guy who will poke at the same place to listen to the change. If there is a change it will handle the event. That is referring to the nature, but when actually Implement, each Framework has a different implementation.
The code below is the code at root, where you put two components.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <template> <div id="app"> <ComponentFirst /> <hr /> <ComponentSecond /> </div> </template> <script> import ComponentFirst from './components/component-first'; import ComponentSecond from './components/component-second'; export default { name: 'App', components: { ComponentFirst, ComponentSecond }, data() { return { message: 'Message default.' } } } </script> |
You must remember the condition for you to be able to transfer data between 2 components that are 2 components must be living (existing). If a guy lives and a guy has been destroyed, of course you can not transfer data already. ^^
The code below is our transit event service bus. It looks quite simple, it is just an instance of Vue ^^.
1 2 3 4 5 6 | import Vue from 'vue'; const EventBus = new Vue(); export default EventBus; |
The code below is ComponentFirst where you start passing data to the Service event bus.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <template> <div> <input placeholder="Enter Text Here" v-model="tempMessage" /> <div> <button @click="sendMessage">Emit data</button> </div> </div> </template> <script> import EventBus from './../event-bus'; export default { name: "ComponentFirst", data() { return { tempMessage: '' } }, methods: { sendMessage() { EventBus.$emit('inputData', this.tempMessage); this.tempMessage = ''; } } }; </script> |
In this code, please pay attention to the name when $ emit, it must of course coincide with the time we received the event.
Next is the code that receives data from the Event bus. We have to pass mounted () to listen when the data is emit.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <template> <div>Component B: {{msg}}</div> </template> <script> import EventBus from './../event-bus'; export default { name: "ComponentSecond", data() { return { msg: '' } }, mounted() { EventBus.$on('inputData' ,payLoad => { this.msg = payLoad; }); } }; </script> |
Transfer data between components via VueX: VueX you can understand it as Redux with React or as NgRX with Angular 2+, its nature is also Store to store data and will have a place to use – listen and receive data . But it is much more general and powerful than using the service a lot. @@
Just like when we use Event Bus, you must make sure that both of our components are existing.
With VueX you understand it as a Stage where the Store all but the data is Singleton (Data unchanged) or used to attach acction (event) from which to transfer data to other parts of the app.
First, install it on my app, here I use yarn, you don’t like to be able to use npm: yarn add vuex or npm install vuex .
Next let’s create a folder store and write our store offline.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { message: '' }, getters: { MESSAGE: state => { return state.message; } }, mutations: { SET_MESSAGE: (state, payload) => { state.message = payload; } }, actions: {} }); |
As you can see, I have just created a Store where we will use it for the entire app. After creating the issue, we also configure it next in main.js so that Vue can receive it.
1 2 3 4 5 6 7 8 9 10 | import Vue from 'vue'; import App from './App.vue'; import store from './store'; new Vue({ store, render: h => h(App), }).$mount('#app'); |
Below is the code inside the Source Component here we will commit a data to the Store and it will Set this data on the stage.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <template> <div> <div>Component first</div> <input placeholder="Enter Text Here" v-model="tempMessage" /> <div> <button @click="sendMessage">Emit data</button> </div> </div> </template> <script> export default { name: "ComponentFirst", data() { return { tempMessage: '' } }, methods: { sendMessage() { this.$store.commit("SET_MESSAGE", this.tempMessage); this.tempMessage = ''; } } }; </script> |
Next in the destination component we will use Compoted to listen if this data changes, it will re-render to the view.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <template> <div> <div>Component second: {{msg}}</div> </div> </template> <script> export default { name: "ComponentSecond", computed: { msg() { return this.$store.getters.MESSAGE; } } }; </script> |
3. Conclusion
Thus, you have seen that there are 4 ways to communicate between components in Vue. Depending on the specific case that we can decide how to use yourself. But if the project has VueX, you should use it thoroughly because as I see it, this is a very good way to manage data in VueJS.
VueX is a very big part that I will write in the next section, guys, please pay attention to it.
3s of advertising. I have just been blogging since the beginning of March, so there are still many things I hope you give up for it https://chamdev.com/lam-the-nao-de-truyen-du-lieu-giua-cac-thanh-phan -in-vuejs / .
4. References
Sharing Data Between Components in Vue.js
How to share data between components in VueJS