Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "what are vue components". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In vue, a component is a reusable Vue instance with a unique component name that extends the HTML element as a custom HTML tag in the form of a component name. Components can greatly improve the reuse rate of code.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

What are the components?

Component is an important concept in Vue. It is a reusable instance of Vue. It has a unique component name. It can extend HTML elements and act as custom HTML tags in the form of component names. Because components are reusable Vue instances, they receive the same options as new Vue (), such as data,computed, watch, methods, and lifecycle hooks. The only exceptions are root instance-specific options like el.

Extract some common modules, then write them into separate tool components or pages, and introduce them directly into the pages you need. Then we can extract it as a component for reuse.

For example, the page header, side, content area, tail, upload pictures, and other pages to use the same can be made into components, improving the code reuse rate.

The use of Vue components

Let's talk about our catalogue first.

one。 Create our component B.vue

Similarly, create a new hello_word.vue as the parent

Then you will see this result.

Key points:

Introduce B.vue module / / import showB from'. / B.vue' into hello_word.vue

The custom module name of the B file showB

Register component

Components: {showB,}, / / use components

Note: to define component names, hump naming methods such as: use PascalCase, use kebab-case

Let's get down to props.

The parent component passes a value to the child component (the parent component binds data such as value= "it's time to work", and the child component gets it through props)

The props option of the child component can receive data from the parent component. Yes, it can only be received, and the props is unidirectional bound, that is, it can only be passed from the parent component to the child component, not backwards.

The usage is as follows:

B component

Parent component

Then you will see that the page shows

Print the value of value in created

Result,

The child component passes the value to the parent component

In the subcomponents:

Reply to parent component

Chuanzhi () {this.$emit ('msg',' got it') / / execute the msg function and take the value to be changed as an argument}

Parent component:

Introducing @ msg='msg' into DOM

Msg (val) {console.log (val,'val')}

Receive by method

Run, click reply parent component

Print the results:

This is the end of the content of "what are vue components". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.