Vue.js Single File Components

What are Single File Components (SFCs) in Vue.js?

Single File Components (SFCs) in Vue.js are files that encapsulate a Vue component's template, script, and styles within a single file using the .vue file extension. This format promotes better organization and maintainability of component code.

What are the three main sections of a Vue Single File Component?

A Vue SFC typically consists of three main sections:

• Template: Defines the HTML structure of the component and can include Vue directives and expressions.
• Script: Contains the JavaScript code for the component, including data properties, methods, lifecycle hooks, and component logic.
• Style: Provides CSS styles that are scoped to the component, ensuring that styles do not affect other components.

How do you create a Single File Component?

You can create a Single File Component by creating a new file with the .vue extension and defining the template, script, and style sections.

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Click me</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello, Vue!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped="">
h1 {
  color: blue;
}
</style>

How do you import and use a Single File Component in another component?

You can import a Single File Component using the import statement in the script section of another component. Then, register it as a local component within the components option.

import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  template: `
    <my-component></my-component>
  `
};

What is scoped CSS in a Single File Component?

Scoped CSS in a Single File Component is a feature that ensures that the styles defined in the style section only apply to that specific component and do not affect other components or global styles. This is achieved by adding the scoped attribute to the style tag.

<style scoped="">
button {
  background-color: green;
  color: white;
}
</style>

What is the purpose of the export default statement in a Single File Component?

The export default statement is used to define the component's options and expose the component definition to other parts of the application. It allows the component to be imported and used in other components or files.

export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello from MyComponent!'
    };
  }
};

How do you handle props in Single File Components?

You can handle props in Single File Components by declaring them in the props option of the component definition. This allows the component to receive data from its parent component.

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

What is the use of the template section in a Single File Component?

The template section in a Single File Component defines the HTML structure of the component. It can include Vue directives, bindings, and expressions, allowing you to create dynamic and reactive user interfaces.

<template>
  <div>
    <input v-model="inputValue" placeholder="Type here...">
    <p>You typed: {{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

How do you implement lifecycle hooks in a Single File Component?

You can implement lifecycle hooks in a Single File Component by including the corresponding hook methods in the export default object. Common lifecycle hooks include created, mounted, and destroyed.

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Component Title'
    };
  },
  mounted() {
    console.log('Component is mounted');
  }
};
</script>

How can you use dynamic components in a Single File Component?

You can use dynamic components in a Single File Component by utilizing the component tag with the is attribute. This allows you to render different components based on a variable or expression.

<template>
  <div>
    <button @click="currentComponent = 'component-a'">Show Component A</button>
    <button @click="currentComponent = 'component-b'">Show Component B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'component-a'
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>