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

This article is to share with you about how to get started with vue components, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Initial knowledge of component applications

Instantiate multiple vue objects

Create multiple vue objects with new and name them, and you can access each other through variables

Example: object 2 modifies the name variable of object 1

Here is: {{name}}

Here is: {{name}}

Change-one-name / / first vue object var one = new Vue ({el: "# vue-app-one", data: {"name": "ccy1"}}) / / second vue object var two = new Vue ({el: "# vue-app-two", data: {"name": "ccy2"}) Methods: {/ / modify the name of vue-app-one to 'ccy333' changeName:function () {one.name =' ccy333'})

Effect: click to change "ccy1" to "ccy333"

Definition and use of global components

To define a global component, you need to give the component a name. When called, the component name is used as a signature; it is equivalent to a custom tag, which can contain many child html tags.

These child html tags are defined in the template attribute of the component, and each time the component is called, the tag in the template is rendered

There must be only one root element in the template

In the component, data is a function that return the data back

You can still use this to call the data defined in data

Example:

Define components:

① defines a component named my-component

② contains data: name and method: changeName

The html effect rendered by ③ has a p label and contains a button to modify the name when the button is clicked.

④ naming convention: camelCase (hump nomenclature) and kebab-case (dash separated naming)

When writing as a tag, when you encounter a name with uppercase letters, you need to change it to lowercase and link the front and back parts with a crossbar. For example, when defining a component, it should be named myComponent, and when it is written as a tag, it should be written as

Components can also be named using the crossbar method when defining them.

If myComponent is used when defining, the label is OK, and the system automatically identifies

/ / there is only one root element p tag in the custom global component my-component// template, which contains a button button Vue.component ('my-component', {template: `)

My name is: {{name}} btn

`, data () {return {name:'ccy'}}, methods: {changeName:function () {this.name = 'Security'}}) / / vue object 1new Vue ({el: "# vue-app-one",}) / / vue object 2new Vue ({el: "# vue-app-two",})

Use components:

① is used under the root element corresponding to the vue object (el specified tag)

Because ② defines a global component, it can be used under any vue object

③ components can be reused, can be used multiple times under a vue object, and components are independent of each other.

Effect:

Data is a function

In the vue object, the value of the data property is an object, such as:

However, in the global component, the same data may be used by multiple vue objects, and when each object does not maintain a separate data, if a vue object modifies a variable in the data, other vue objects will be affected when they get the data

If we use the above example as an example, if the data in the component is an object (reference) and nothing else is changed, the two vue objects share the same name variable; when I change the name data through one of the vue objects (that is, click any btn button), the name obtained by the other object also changes (the 'ccy'' at the other buttons is also changed to 'safe')

Therefore, in order to ensure the independence of the data, that is, each instance can maintain an independent copy of the returned object, data return a newly created data for each instance, and the data obtained by different vue objects does not affect each other.

Data in a component is not allowed to be an object in vscode, and an error will be reported:

Vue warn: The "data" option should be a function that returns a per-instance value in component definitions.

Local component

Local components are registered in a vue object

Only vue objects that have registered the local component can use this local component

Example:

Local component definition:

/ / there is only one root element for template: ulvar msgComponent = {/ / data is self-provided (hobbies) template: `{{hobby}}`, data () {return {hobbies: ['watching TV', 'watching anime', 'eating delicious'}

Register partial components:

/ / can only be used by vue objects that have registered the local component. Note the naming convention here for p#vue-app-one//. The key of the object in components will be used as a tag signature, and the naming of multiple word stitching needs to be written as msg-component, which is directly simplified as msg,new Vue ({el: "# vue-app-one", components: {"msg": msgComponent}}).

Use in the html file:

This is vue-app-one.

My hobbies:

Effect: the part circled in the red box is rendered by the local components.

Parent passing value to child / passing reference: prop static passing value

Create subcomponents:

Var titleComponent = {props: ["title"], template: `

{{title}}

`/ / the required data title is provided by the parent component}

Register the child component in the components property of the parent component:

New Vue ({el: "# vue-app-one", components: {"msg": msgComponent, "titleComponent": titleComponent},})

Use child components on the parent component:

This is vue-app-one.

Effect: the red box marks the parent passing the value to the child and displaying it.

Dynamic value: v-bind

Define subcomponents:

Var titleComponent = {props: ["title"], template: `

{{title}}

`}

Register the child component in the components property of the parent component:

New Vue ({el: "# vue-app-one", components: {"msg": msgComponent, "titleComponent": titleComponent}, data () {return {title: "my hobbies are",})

Using child components, dynamically pass values by binding the variable title in the parent component data:

This is vue-app-one.

Effect: the red box is the display of dynamic binding to obtain data.

When passing complex data such as arrays, you can also use v-bind to pass values dynamically, such as:

You need to pass the hobbies array to the child and create the data hobbies in the vue instance object (parent):

New Vue ({el: "# vue-app-one", components: {"msg": msgComponent, "titleComponent": titleComponent}, data: {title: "my hobbies are", hobbies: ['watching drama', 'watching animation', 'eating good food'], / / data to be passed to sub-components}})

Define subcomponents:

Var msgComponent = {template: `

{{hobby}}

`, props: ["hobby"], data () {return {}

Use subcomponents:

This is vue-app-one.

Effect:

Jump back to "a little idea".

Child to parent: event passes value $emit

The child component cannot pass data to the parent component through prop. You need to use the event to throw a value to the parent component, informing the parent component that I need to implement a function that handles the event.

Example: click the button to change the name chinesename

(since the data variable name does not support chinese-name form and the chineseName form is not supported in curly braces, I use lowercase here. Record here, and fill in the hole later when you learn something new.)

First define the initial value of chinesename in the data of the parent component:

New Vue ({el: "# vue-app-one", data: {chinesename: "anzhi" / / chinesename initial value}})

Create a subcomponent and register the event change-name (just like the click event, you need to enable the system to recognize and listen for this event, and perform an agreed action when the event is triggered):

Vue.component ('blog-post', {props: [' chinesename'], template: `{{chinesename}}) modify the name

The `/ / blog-post component contains an h4, displays chinesename, and a button / / clicks this button to trigger the change-name event, passing "ruosu" as an argument to the specified handler function onChangeName})

Using child components in the parent component, define the handler function of change-name as onChangeName:

This is vue-app-one.

Define the event handler function onChangeName at the parent component:

New Vue ({el: "# vue-app-one", data: {chinesename: "anzhi"}, methods: {onChangeName:function (value) {/ / replace chinesename with the passed data this.chinesename=value})

Effect:

A little idea.

With regard to the distinction between parent and child components, write a summary here, or fill in the ┗ after learning new knowledge in the future |'O' | ┛ ow ~

The definition and difference between the two are not clearly specified on the official website. I searched the Internet and found that what is recognized and easy to understand by many people is:

The root element specified by el is the parent component (used as the parent component)

Vue instance objects can also be seen as components

In the previous examples of parent-child values, we can see that for a local component, we will register and use it in a html root element, so the root element specified by el is the parent component of the local component in the html file, and the local component is a part of the parent component when used in html, which is responsible for data transfer.

Case of jumping to parent-to-child dynamic value transfer

Then use the tongue twister to say another wave, that is, the identity of the definition and use of the title-component component is different, in the definition, it is a local component and a child component, and it needs to be registered before it can be used; in the use, it is part of the root element, which is the parent component, and "it" undertakes the important task of data communication between the parent component and the child component.

This summary is also applicable in the case of global components. The root element of using the global component is the parent component, as in the case of passing values from the child to the parent above, p#vue-app-one is the parent component, acting as a bridge between the parent and child components, and the global component blog-post is the child component.

Jump to the case of the child to the parent

The figure shows:

If it is a subcomponent and a subcomponent is nested, the nested component is a subcomponent, and so on

Create a project using scaffolding and pass values using the component and

The installation steps of CLI scaffolding can be seen in my article. Using CLI scaffolding to create a project is simple and fast, especially, the page content and data transfer need to be written in .vue files, each vue file is a module.

We complete a specific function by reasonably assembling each module (component). The cooperation between components and the role of passing values between father and son are more obvious here. Each vue file can be regarded as a component, and we can divide the page into several parts according to the requirements, such as the navigation bar, the middle content and the bottom three parts. The implementation of each part is distributed to each sub-component, including the display of pages and the acquisition of data.

For example, customize the blog page:

The main page is composed of vue-app main components, including the navigation bar, the middle part and the bottom bar.

The navigation bar is completed by the vue- header subcomponent

The intermediate content is divided by function.

Add blog: addBlobsubcomponent

Show blog: showBlobs subcomponent

Modify the blog: modifyBlobsubcomponent

Click to display single blog content: singleBlobs sub-component

The bottom information bar is completed by vue-footer

In addition to the main page, other subsections and components are divided according to the function, auxiliary main page display

The schematic diagram of the value passed by the personal blog father to the son is as follows:

Each sub-function is composed of different components, which are assembled into a larger functional component.

Click to display a single blog and modify the blog two components need to obtain the blog id from the main page before the corresponding display and operation, which is a typical parent-child value

The above is how to get started with vue components, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.