top of page
Search
  • Writer's picturealeksvp

How to communicate between components in a Vuetify app

Updated: Oct 27, 2020

Full code: https://github.com/aleksvp2017/infoflow

Using:

  • Vue/Vuetify: to construct de UI;

  • Vuex: to share data between components;

  • Visual Studio Code: to write and debug the code.


There are a lot of ways of communicating between components in a Vuetify app. Going to show a few below.


1 - Refs

Refs are Vue instance properties used as a reference to HTML elements or child elements.

Assuming you have a component being used inside another, all you have to do if define a ref to it. Then you can simply call its methods, like this:

<child ref="mychild"/>

...

import ChildComponent from './ChildComponent.vue' export default { components: { 'child': ChildComponent,  },

...

//showTextonConsole is a method on ChildComponent

methods: { invokeMethodOnChild(){ this.$refs.mychild.showTextOnConsole('test')     }   }

//you could also use this.refs["mychild"]


Just consider that warning from Vue guide: $refs are only populated after the component has been rendered, and they are not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing $refs from within templates or computed properties.


2 - Emit

This is a way to the child componet to invoke a method on its parent. It is like a personalized event.


The parent must be listening to it, like this:

<child ref="mychild" v-on:parentEvent="doSomething"/>


This way the child can invoke that like this:

callingDad(){ this.$emit('parentEvent')  }

//method doSomething is going to be triggered on parent component


3 - Props

Used to send values from parents to child components.


The child component must be expecting it, like this:

...

export default { props:['showText'],

...

So the parent can send the value, like this:

<child ref="mychild" v-on:parentEvent="doSometing" :showText="false"/>


From here, the property can be used as if it was declared in the data of the child component (but you shouldn't change its value on the child). And, the great part is that it is reactive.


4 - Vuex

It's a pattern to manage state and also a library for Vue apps. Works as a central store for all the components (Single Source of Truth). It works very similar to the Singleton pattern, but the values are reactive and you only can change state using muttations.


First, install vuex:

npm install vuex --save


Then, on your entry point (usually main.js):

import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0   }, mutations: { increment (state) { state.count++     }   } }) new Vue({ ... store, ... })


From, here, you can access the state (which is the data you can share between components) from any component. To change the value, you call a mutation (in this case, increment), like this:

this.$store.commit('increment')


To access the value is prety straightforward:

this.$store.state.count


For organizational porpusoses, you can separate the state, the mutation in diferent files. But the result is the same.


That's it. It is a great way to share user information, for example.



Four different ways, all of them, pretty simples, right?






116 views0 comments

Kommentarer


Post: Blog2_Post
bottom of page