Detailed example of communication between vue components Detailed explanation of child and parent (2)-JS Tutorial-php.cn

Continue learning with a detailed explanation of the communication between the parent and child of the vue component. This article mainly introduces in detail the information related to the communication between children and parents between Vue components. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

2. Communication between components (child components pass values to parent components)

Complete data transmission through events.

①Define a method in the parent component to receive the value passed by the child component through the event

methods:{ 　　recvMsg:function(msg){ 　　//参数msg就是子组件通过事件出来的数据 　　} }

Copy after login

②Bind event processing function

Events are generally custom events

Copy after login

③Trigger events in child components

　　　　　　事件名，值 this.$emit('myEvent',myPhone) //触发一个叫做myEvent的事件，同时把第二个参数数据传递给事件对应的处理函数

Copy after login

Summary:

In Vue, 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.

    组件间通信子传父  
   
{{msg}}

Copy after login

Put an input in the child component and click the button to send the content entered by the user to the parent component

    子与父之间的通信  
   
{{msg}}

Copy after login

Related recommendations:

Detailed explanation of parent-child communication in the vue component (1)

Introduction and use of the v for directive in the vue component v- Analysis of alarm issues when for

Examples of methods for using iframe elements in vue components

The above is the detailed content of Detailed example of communication between vue components Detailed explanation of child and parent (2). For more information, please follow other related articles on the PHP Chinese website!