Shulou(Shulou.com)05/31 Report--

This article focuses on "how to implement a reusable component in Vue.js". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn how to implement a reusable component in Vue.js.

Constituent component

Component is a module with certain functions and relatively independent functions between different components. The component can be a button, an input box, a video player, and so on.

Reusable components, high cohesion and low coupling.

So, what constitutes a component? Take video, the native component of the browser, as an example to analyze the components of the component.

Your browser does not support the video tag.

As you can see in the example, the component consists of states, events, and nested fragments. State is some of the current data or properties of the component, such as src, width, and height in video. An event is a behavior in which a component triggers some actions at a specific time, such as video triggers the corresponding event to perform processing when the video resource loads the result or fails. Snippets, which refer to content nested in component tags, are displayed under certain conditions, such as displaying prompts when browsers do not support video tags.

In the Vue component, the state is called props, the event is called events, and the fragment is called slots. The component of a component can also be understood as the external interface of the component. A good reusable component should define a clear exposed interface.

Props allows external environments to pass data to components

Events allows components to trigger side effects of the external environment

Slots allows the external environment to combine additional content into components.

Use vue to extend the video component to construct a component that supports playlists, myVideo:

The myVideo component has a clear interface, receives playlists and player wide states, can trigger successful or failed loading, play previous or next events, and can customize the last page at the end of playback, which can be used to insert ads or display the next video message.

Communication between components

In Vue.js, the relationship between parent and child components can be summarized as props down, events up. The parent component passes data down to the child component through props, and the child component sends messages to the parent component through events. See how they work.

Business irrelevant

Naming

The naming of components should have nothing to do with business. The component should be named according to its function.

For example, a list showing the company's departments, each item as a component, and named DepartmentItem. At this point, there is a requirement to display a list of team members in the same style as the department list just now. Obviously, the name DepartmentItem is not appropriate.

Therefore, the naming of reusable components should avoid being related to the business and name them according to their roles and functions. Item 、 ListItem 、 Cell . You can refer to the naming of some UI frameworks such as Bootstrap, ElementUI, and so on.

Business data independent

The reusable component is only responsible for the presentation and some interaction and animation on the UI, and how to get the data has nothing to do with it, so don't get the data inside the component and any operations that deal with the server. Reusable components only implement UI-related functions.

Component responsibility

Constraining the responsibility of the component can make the component better decouple and know what function is implemented by the component and what function does not need to be implemented.

Components can be divided into general components (reusable components) and business components (disposable components).

Reusable components implement common functions (will not change depending on the location and scenario in which the component is used):

The display of UI

Interaction with the user (event)

Animation effect

Business components implement partial business functions:

Get data

Operations related to vuex

Burying point

Reference reusable components

Reusable components should minimize dependence on external conditions, and all vuex-related operations should not occur in reusable components.

Components should avoid dependencies on their parent components and do not manipulate examples of parent components through this.$parent. The parent component also does not refer to the example of the child component through this.$children, but interacts with it through the interface of the child component.

Namespace

In addition to defining a clear public interface, reusable components also need a namespace. Namespaces avoid conflicts with browser retention tags and other components. Namespaces can avoid a lot of naming conflicts, especially when a project references external UI components or components migrate to another project.

...

Business components can also have command space, distinguished from general-purpose components. Here st (section) is used to represent business components.

Context-free

Again, reusable components should minimize dependence on external conditions. Do not split a functional component into several widgets without special requirements and a single component is not overweight.

TableHeader components and TableBody components rely on the current context, that is, the environment in which TableWrapper components are nested. You can have a better solution:

The context-free principle can lower the threshold for component use.

Data flattening

When defining component interfaces, try not to pass the entire object in as a prop.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.