In Vue, components are the basic unit for building user interfaces. Encapsulating common components is a good practice that improves code reusability and maintainability. Here is an example that demonstrates how to encapsulate a common button component.
First, create a Vue component file named. This component will encapsulate a customizable button with different styles and click events. In the file, write the following code:
<template>
<button :class="classes" @click="onClick">
<slot></slot>
</button>
</template>
<script>
export default {
name: 'Button',
props: {
type: {
type: String,
default: 'default'
},
size: {
type: String,
default: 'medium'
}
},
computed: {
classes() {
return ['button', `button-${}`, `button-${}`];
}
},
methods: {
onClick() {
this.$emit('click');
}
}
};
</script>
<style scoped>
.button {
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
.button-default {
background-color: #ccc;
color: #333;
}
.button-primary {
background-color: #007bff;
color: #fff;
}
.button-success {
background-color: #28a745;
color: #fff;
}
.button-danger {
background-color: #dc3545;
color: #fff;
}
.button-small {
font-size: 12px;
}
.button-medium {
font-size: 14px;
}
.button-large {
font-size: 16px;
}
</style>In the above code, we define a Vue component called Button. This component accepts two properties: type and size, which represent the style and size of the button respectively. By default, the style of the button is default and the size is medium.
In the template, we use :class to bind dynamic classes and set the style class of the button according to the type and size attributes. Use @click to bind the click event and use the <slot> slot to allow insertion of custom content in the button.
In computed attribute classes, we dynamically generate an array of class names based on the attribute values. The style class of a button is composed of button and button-${}, and the size class is composed of button-${}.
In method onClick, we trigger a custom event click so that the button click event can be listened to where the component is used.
Finally, in styles, we define the basic style of the button and the classes of different styles.
Now we can use this common button component in other Vue components. For example, suppose we have a root component named, and we can use the button component using the <Button> tag in the template:
<template>
<div>
<Button type="primary" size="large" @click="handleClick">Click me</Button>
</div>
</template>
<script>
import Button from './';
export default {
name: 'App',
components: {
Button
},
methods: {
handleClick() {
alert('Button clicked');
}
}
};
</script>In the above code, we import the Button component and register it in the components option. Then, we use the <Button> tag in the template and set the type and size attributes. We also listened for the button click event and a prompt box popped up in the handleClick method.
In this way, we can reuse this common button component throughout the application without having to repeatedly write styles and event processing logic.
This example demonstrates how to encapsulate a common button component and use it in other components. By encapsulating common components, we can improve code reusability and maintainability, and promote team collaboration and development efficiency.
Global and local components
There are two ways to use components in Vue: global components and local components.
Global Components are components registered globally in Vue applications and can be used anywhere. Global components can be used in the root component or any subcomponent without the need for additional import or registration steps. To create a global component, you can use methods to define the component and register it.
For example, suppose we have a component called Button that we can use in the root component to register it as a global component:
//
import Vue from 'vue';
import Button from './';
('Button', Button);
new Vue({
// ...
});In the above code, we import the Button component and register it as a global component using the method. Now we can use this global component using the <Button> tag anywhere.
//
<template>
<div>
<Button></Button>
</div>
</template>
<script>
export default {
// ...
};
</script>A local component is a component registered locally in a Vue component and can only be used inside the component. Local components need to be registered in the components option of the component. Local components can only be used in the templates of that component, but not in other components.
For example, suppose we have a root component called App, we can register the Button component as a local component in the components option:
<template>
<div>
<Button></Button>
</div>
</template>
<script>
import Button from './';
export default {
name: 'App',
components: {
Button
},
// ...
};
</script>In the above code, we import the Button component and register it as a local component in the components option. Now, we can use the <Button> tag in the template of the App component to use this local component.
With global and local components, we can use components in Vue applications to encapsulate reusable functional and interface elements. Global components are suitable for components shared among multiple components, while local components are suitable for components used internally in a single component. The choice to use global components or local components depends on the specific application scenario and requirements.
Components in scaffolding vue-cli
In projects created in Vue CLI, components are used slightly differently. Vue CLI is an official scaffolding tool for quickly building Vue projects. It provides some default project structure and configuration.
In the Vue CLI, we can use Single File Components to define and use components. The single file component places templates, scripts, and styles in one file, making the component structure clearer and easy to maintain and manage.
In Vue CLI projects, a folder named components is usually created in the src directory to store component files. We can create a new component file in this folder, for example.
In the file, we can use the <template> tag to define the component's template, use the <script> tag to define the component's script, and use the <style> tag to define the component's style. For example:
<template>
<button class="button" @click="handleClick">{{ label }}</button>
</template>
<script>
export default {
name: 'Button',
props: {
label: {
type: String,
required: true
}
},
methods: {
handleClick() {
this.$emit('click');
}
}
};
</script>
<style scoped>
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 4px;
}
</style>In the above code, we define a component called Button. The component has a label property that displays the text of the button. When the button is clicked, the handleClick method is triggered and a custom event named click is triggered through the $emit method.
To use the Button component in other components, we need to import it in the target component and register it in the components option. For example, use Button components in a component:
<template>
<div>
<Button label="Click me" @click="handleButtonClick"></Button>
</div>
</template>
<script>
import Button from './components/';
export default {
name: 'App',
components: {
Button
},
methods: {
handleButtonClick() {
alert('Button clicked');
}
}
};
</script>In the above code, we import the Button component and register it in the components option. Then, use the <Button> tag in the template to use this component, and set the label attribute and listen for click events.
In this way, we can create and use components in the Vue CLI project. Single-file components make the definition and use of components clearer and more convenient, helping to improve the maintainability and reusability of the code.
The above is a detailed explanation of the packaging of public components in Vue. For more information about public components in Vue, please pay attention to my other related articles!