Shulou(Shulou.com)05/31 Report--

This article introduces how to pass values to the parent component through $emit () and $dispatch (). The content is very detailed. Interested friends can refer to it and hope it will be helpful to you.

A custom component is a component written by a developer, which is used like Native and finally rendered according to the component; at the same time, it is developed like a page, with ViewModel to manage data, events and methods. A custom component is also called a subcomponent because it cannot exist independently and needs to be introduced to the page to take effect. Sub-components avoid a large and bloated layout of a page, and make the code readable and easy to maintain.

How does a child component pass a value to the parent component? For example, when the child component modifies the data, how do you give the final data to the parent component? There are two main ways:

The child component executes the method of the parent component by triggering a custom event bound on the node by $emit ().

The child component triggers the custom event through $dispatch (), and the parent component monitors the trigger of the custom event through $on ().

Solution method one

The child component executes the method of the parent component by triggering a custom event bound on the node by $emit (). The following example implements how to pass the count value from the child component to the parent component. The child component defines the emitEvt event (when referenced in the parent component, it needs to add the on prefix). The child component carries the count parameter when calling $emit (), and the parent component can get the parameter value when it responds to the event.

`

I am the parent component count: {{fcount}} export default {private: {fcount:20}, emitEvt (evt) {this.fcount = evt.detail.count}} `

`

I am a sub-component-count: {{compCount}} export default {props: ['count'], data () {return {compCount:this.count}}, addHandler () {this.compCount + + this.$emit (' emitEvt', {count:this.compCount})}} `

The second subcomponent of the method calls childVm.$dispath () to complete the upward pass. The child component triggers the custom event through $dispatch (), the parent component monitors the trigger of the custom event through $on (), controls the change of the num in the custom event, and the parent component obtains the value of num in the child component and assigns it to the parent component through evt.detail.

`

I am the parent component fnum: {{fnum}} export default {private: {fnum:20}, onInit () {this.$on ('dispathEvt',this.dispathEvt)}, dispathEvt (evt) {this.fnum = evt.detail.num}} `

`

I am the sub-component: {{compNum}} export default {props: ['num'], data () {return {compNum:this.num}}, delHandler () {this.compNum-- this.$dispatch (' dispathEvt', {num:this.compNum})}} `

On how to use $emit () and $dispatch () to achieve the value of the child component to the parent component to share here, I hope the above can be of some help to you, can learn more knowledge. If you think the article is good, you can share it 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.