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

This article mainly explains "how to communicate between father and son components in Vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to communicate between father and son components in Vue.

Vue parent and child components

What are parent-child components?

The introduction of another component in a component is called a sub-component, because the modularization of vue will separate the common part into a module, and will not write all the page content in a vue file, because of modularization, the communication problem between the two modules cannot be avoided, then there is the problem of data transfer between modules (components).

Vue parent-child component communication

In vue, one component often uses the data or methods of another component, so there is a problem of communication between parent and child components.

Vue from father to son

1. Look at the code first, and explain it below.

/ / parent component / / Child component {{ctitle}}

Orange

/ / subcomponent Vue.component ("cpn3", {template: "# cpn3", / / data in the component is a function and must return an object The variable is written in the return object props: {ctitle: {type: String, default () {return {}}) / / parent component const app = new Vue ({el: "# app") Data: {title: 'orange'}, methods: {},})

Explanation:

1. Write the basic template separation component first

two。 Add the props attribute to the sub-component, use the object way, you can write the parameters you need to pass in the props, the parameters are also in the object way, the code is relatively clear

/ / the subcomponent Vue.component ("cpn3", {template: "# cpn3", / / the data in the component is a function and must return an object. The variable is written in the returned object. Props: {ctitle: {/ / the parameter also uses the object form, and type passes the type default function. Is to return a value showing type: String, default () {return {}} when the parameter cannot be found

two。 Then add the required properties to the parent component

/ / parent component const app = new Vue ({el: "# app", data: {/ / the title here is to pass the properties of the child component to define title: 'orange'}, methods: {},} in the parent component)

3. Bind two parameters in the parent component

/ / it can be understood as assigning the title in the parent component to ctitle, so that the component can use the data property of the parent component

4. Finally, you want to use the property name defined by the subcomponent in the subcomponent

/ / Child component / / the property here is named ctitle {{ctitle}} Vue.

1. The child passing the parent means that the content of the child component is passed to the parent component so that the parent component can use the data from the child component at any time by customizing the function.

1. First of all, let's make an imitation of Taobao sidebar merchandise, click or move the mouse to the above to appear the case of content goods.

2. Taking the above picture as an example, let's talk about the child passed by the component to the parent.

2.1 Let's separate the child component from the parent component and take a look at the child component code one by one

{{ctitle}} {{item.name}} Vue.component ("cpn", {template:'# cpn', / / parent-child props props: {ctitle: {type: String / / when data cannot be found, default () {return {}}, data () {return {list: [{id: 'phone' Name: 'mobile'}, {id: 'tv', name:' TV'}, {id: 'paired, name:' home appliances'} {id: 'computer', name:' computer'},]}}, / / Custom event methods: {/ / Custom event goodsclick (item) {this.$emit ('itemclick') Item)}})

Explanation: a subcomponent is to write a html that can be packaged and used at any time, which is the same as html, but just packaged (there should be no problem with this understanding)

1. The subcomponent has the same data,methods as vue, so write an array in data, then iterate through the generate button in v-for, which is no different from normal writing, then write a function, bind the click event, and pass the item, that is, the object passed into the array, into the function.

{{item.name}}

two。 And then the most important, the most critical step is to send a custom function to the parent component in the click event function that you bind, which is to send it to the parent component.

Methods: {/ / Custom event goodsclick (item) {/ / itemclick is the custom function, and the item is also passed to the parent component this.$emit ('itemclick', item)}}

This is the completion of the subcomponent, and this is the style of the subcomponent, as shown in the figure above.

2. Next, let's talk about how the parent component receives custom events from child components.

/ / parent const app = new Vue ({el: "# app", data: {title: "title",}, methods: {cpnclick (item) {console.log ("cpnclick", item);})

Explain: when you have written the subcomponent, you will call it, and the invocation will be your component name as label, here is

Write a function in the parent component and bind the custom events passed from the child component in it, so that the child component is successfully bound, and the child component passes data to the parent component.

At this point, I believe you have a deeper understanding of "how to communicate between father and son components in Vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.