Vue.js Components

What are components in Vue.js?

Components in Vue.js are reusable instances of the Vue constructor that encapsulate their own HTML structure, data, and behavior. They allow developers to build modular applications by dividing the UI into independent, self-contained units.

How do you define a Vue component?

You can define a Vue component using the Vue.component() method or by creating a component as part of a Vue instance. A component typically includes a template, data, and methods.

Vue.component('my-component', {
  template: '<div>Hello from My Component!</div>',
  data() {
    return {
      message: 'This is a component message.'
    };
  }
});

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

How do you use a component in a Vue instance?

To use a component in a Vue instance, you include it in the template of the parent component or instance. The component can be referenced by its registered name.

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello from My Component!'
    };
  }
});

const app = new Vue({
  el: '#app',
  template: '<my-component></my-component>'
});

What are props in Vue.js, and how do you pass data to components?

Props are custom attributes used to pass data from a parent component to a child component. Props allow components to receive data and react to changes in the parent component.

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

const app = new Vue({
  el: '#app',
  data: {
    parentMessage: 'Hello from Parent!'
  },
  template: '<child-component :message="parentMessage"></child-component>'
});

What is the difference between props and data in Vue components?

Props are used to pass data from a parent component to a child component, making them read-only in the child. In contrast, data refers to the reactive properties defined within a component itself. Data can be modified directly within the component.

// Example showing the difference
Vue.component('child-component', {
  props: ['parentData'],
  data() {
    return {
      localData: 'This is local data.'
    };
  },
  template: '<div>{{ parentData }} - {{ localData }}</div>'
});

How can you create dynamic components in Vue.js?

You can create dynamic components using the component element in the template and binding the is attribute to a variable or expression that determines which component to render.

const app = new Vue({
  el: '#app',
  data: {
    currentComponent: 'component-a'
  },
  components: {
    'component-a': { template: '<div>Component A</div>' },
    'component-b': { template: '<div>Component B</div>' }
  },
  template: `
    <div>
      <button @click="currentComponent = 'component-a'">Show A</button>
      <button @click="currentComponent = 'component-b'">Show B</button>
      <component :is="currentComponent"<>/component>
    </div>
  `
});

What are slots in Vue.js components?

Slots are placeholders in a component's template that allow you to pass content from a parent component into the child component. They provide a way to create flexible components that can render different content based on the usage context.

Vue.component('modal', {
  template: `
    <div class="modal">
      <slot></slot> 
    </div>
  `
});

const app = new Vue({
  el: '#app',
  template: `
    <modal>
      <h1>Modal Title</h1>
      <p>This is the modal content.</p>
    </modal>
  `
});

How do you create a component with lifecycle hooks?

You can define lifecycle hooks within a component to execute code at specific stages of the component's lifecycle. Common lifecycle hooks include created, mounted, updated, and beforeDestroy.

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello!'
    };
  },
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  }
});

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

What is the purpose of the key attribute in Vue.js?

The key attribute is used in Vue.js to provide a unique identifier for each element in a list rendered using the v-for directive. It helps Vue optimize rendering by tracking elements and minimizing unnecessary re-renders when the list changes.

const app = new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Banana', 'Cherry']
  },
  template: `
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  `
});

How can you communicate between parent and child components in Vue.js?

You can communicate between parent and child components using props to pass data from parent to child, and events (using $emit) to send messages from child to parent. This pattern promotes a clear data flow and keeps components decoupled.

Vue.component('child-component', {
  template: '<button @click="notifyParent">Notify Parent</button>',
  methods: {
    notifyParent() {
      this.$emit('child-event', 'Data from child'); // Emitting an event
    }
  }
});

const app = new Vue({
  el: '#app',
  template: `
    <div>
      <child-component @child-event="handleChildEvent"></child-component>
    </div>
  `,
  methods: {
    handleChildEvent(data) {
      console.log('Received:', data); // Handling the event
    }
  }
});