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

This article will explain in detail the example analysis of Vue components and parent-child component communication. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

What are components?

The component in vue is actually a part of the page, such as every component in the computer (such as hard disk, keyboard, mouse). It has independent logic or interface, and at the same time it can integrate with each other according to the prescribed interface rules to become a complete application.

A page is made up of similar parts, such as navigation, lists, pop-up windows, drop-down lists, and so on. Pages are just containers of these components, which are freely combined to form a fully functional interface. When a component is not needed or wants to be replaced, it can be replaced and deleted at any time without affecting the operation of the entire application.

The core idea of front-end componentization is to split a huge and complex thing into small things with reasonable granularity.

What are the benefits of using components?

1. Improve development efficiency

2. Easy to reuse

3. Simplify debugging steps

4. Improve the maintainability of the whole project

5. Facilitate collaborative development

Components in vue

The component in vue is a custom tag, and vue.js 's compiler adds special features to it

Components in vue can also extend native html elements to encapsulate reusable code

Basic components of components: style structure, behavioral logic, data

Register component

Global registration

It can be used in any template. Register before using it.

Syntax: use Vue.compontent (component name, option object)

Component name naming convention: hump, kebab

Using components in html: using kebab naming

For example, register Vue.compontent ('my-compontent', {}) when using it

Custom drop-down box / / Global registration component Vue.component ('cus-list', {data () {return {}}, template: ``}) new Vue ({el: "# app") Data: {}})

When in use, as long as the page summons this component can be used, and can be reused.

Component .png

Local registration

Registered in the component instance through the option object and used only in the registered scope

Custom drop-down box new Vue ({el: "# app", components: {'cus-list': {template: ``}}, data: {}})

Locally registered components can only be used in the scope of the current instance, and can also be reused in the scope, as follows.

Component .png

Communication between parent and child components

The parent component communicates with the child component

Parent component = "Child component (with props)

The scope of the component instance is isolated, and the data of the parent component cannot be used directly by the child component.

You can bind data with custom properties on the component, and group the custom property names to be displayed with the props life in the component.

In other words, remember that when it is worthwhile for the parent component to pass to the child component, it is necessary to add a property to the component when calling the component, and then receive it with props in the component, which can be used according to the property name within the component.

Custom drop-down box Vue.component ('cus-list', {data () {}, props: [' btnValue'], template: ``}) new Vue ({el: "# app", data: {}})

Page effect

Props passes a value of .png

The child component communicates with the parent component

Child component = parent component

Custom time is needed. The parent component listens for custom events with $on, and $emit triggers custom events of interest to the parent component.

1. Define event content {{item}} in sub-components

2. V-on custom events in the parent component to receive vMuoon on the receipt = "changeValue"

3. When a child component event is triggered, $emit notifies the parent component this.$emit ("receive", item)

4. The parent component makes corresponding feedback according to the custom event changeValue:function (value) {this.val = value;}

Looking at the following example, when you click input, a drop-down list box appears, the corresponding list is selected, and the contents of the list appear in the input box.

Custom drop-down box / / Global registration component Vue.component ('cus-list', {data () {return {selectShow:false, val:''}}, props: [' selectValue','list'] Template: ``, methods: {changeValue:function (value) {this.val = value }) Vue.component ('list-li', {props: [' list'], template: `{{item}}`, methods: {clickLi:function (item) {this.$emit ("receive", item) }) new Vue ({el: "# app", data: {list1: ['Song Zhongji','Yu Wenle','Lu Han', 'Chen Xiaochun', 'Huang Xiaoming','Yi Yi Qianxi']}})

This is the most basic application of components, in-depth application, you will find a lot of fun things.

On the "Vue components and parent-child component communication example analysis" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.