Advanced Vue.js Techniques

In this lesson, we will explore advanced techniques in Vue.js that can enhance your applications and improve maintainability. We'll cover various aspects such as component communication, state management with Vuex, the use of mixins, and async components.

Vue.js provides several ways for components to communicate with each other:

2.1 Props and Events

Props allow parent components to pass data to child components, while events can be used for child components to send messages back to their parents.

<template>
  <ChildComponent :message="parentMessage" @childEvent="handleChildEvent"/>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    }
  },
  methods: {
    handleChildEvent(data) {
      console.log(data);
    }
  }
}
</script>
            

2.2 Event Bus

For broader communication across components, you can use an event bus. Create a new Vue instance and use it to emit and listen for events.

const EventBus = new Vue();

EventBus.$emit('eventName', eventData);
EventBus.$on('eventName', (data) => {
  console.log(data);
});
            

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application.

3.1 Setting Up Vuex

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});
            

3.2 Using Vuex in Components

<template>
  <div>Count: {{ count }}</div>
  <button @click="increment">Increment</button>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
}
</script>
            

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin can contain any component options.

const myMixin = {
  data() {
    return {
      mixinData: 'This is mixin data'
    }
  },
  created() {
    console.log('Mixin hook called');
  }
};

export default {
  mixins: [myMixin],
  created() {
    console.log('Component hook called');
  }
};
            

Async components allow you to load components on demand, which can improve the initial loading time of your application.

const AsyncComponent = () => import('./AsyncComponent.vue');

export default {
  components: {
    AsyncComponent
  }
};