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

This article mainly explains "the method of communication and event trigger of parent-child components in Vue". The content of the explanation in this article is simple and clear, and it is easy to learn and understand. Please follow Xiaobian's train of thought to study and learn "the method of communication and event trigger of parent-child components in Vue".

1. Component child component I am the child component I am the child component passing the value to the parent component receiving the value of the parent component: the parent component I am the parent component the value passed to the parent component: import Child from'. / Child';export default {components: {Child}}

Effect display:

From this diagram, we can see the structure of parent-child components. Let's practice the communication of parent-child components.

Parent-child component communication parent component to child component communication

Implementation idea: the child component accepts the value passed by the parent component through props.

In the parent component, define a data variable and dynamically bind this value in the child component tag.

/ / Father.vue I am the value passed by the parent component child component to the parent component: {{ChildMsg}} import Child from'. / Child';export default {data () {return {data:'I am your father',}}, components: {Child}}

It is then received through props in the child component, so that the component receives the value passed by the parent component.

/ / Child.vue I am a child component passing values to parent components parent components pass values to child components: {{FatherMsg}} export default {data () {return {data:'I am your children',}}, props: ['FatherMsg']}

As you can see, our parent component's communication to the child component has been implemented, and then the child component communicates to the parent component, which uses the this.$emit method.

The child component communicates with the parent component

The idea is to trigger a custom event and pass a value by using this.$emit in the child component, and then listen for the event in the parent component.

Add a click event to the button button in the subcomponent to customize the event through the this.$emit, passing in a parameter:

I am a child component passing values to parent components: {{FatherMsg}} export default {data () {return {data:'I am your children',}}, props: ['FatherMsg'], methods: {send () {this.$emit (' ListenChild', this.data);}

In the child component tag in the parent component, define a variable in data to receive this value, then listen for custom events in the child component, and accept this parameter assignment to the defined variable:

I am the value passed by the parent component child component to the parent component: {{ChildMsg}} import Child from'. / Child' Export default {data () {return {data:'I am your father', ChildMsg:',}}, components: {Child}, methods: {ListenChild (data) {console.log ("value passed by child components:", data); this.ChildMsg = data;}

Click the child component to pass values to the parent component, and you can see the following effect:

Third, the parent-child component event triggers the parent component to call the event method in the child component

The method of invoking subcomponents directly through ref:

/ / Child.vue I am a subcomponent {{msg}} export default {data () {return {msg:',}}, methods: {childFun () {console.log ('I am the subcomponent's method childFun'); this.msg ='my method was called'},},}

Add the ref attribute to the child component tag, and then call the method within the child component by finding the property binding ref in the method through this.$refs.

/ / Father.vue I am the parent component. Click to call the child component method import Child from'. / Child';export default {components: {Child}, methods: {handleClick () {this.$refs.child.childFun ();},},}

Through the $emit, $on methods of the component:

/ / Child.vue I am a subcomponent {{msg}} export default {data () {return {msg:',}}, mounted () {this.$on ('childFun', function () {console.log (' I am a subcomponent method'); this.msg ='my method was called'});}}

Use $on to bind a method in the child component, and then find the event name above the binding $on in the parent component through $emit, but you also need the cooperation of ref.

/ / Father.vue I am the parent component click to call the child component method import Child from'. / Child';export default {components: {Child}, methods: {handleClick () {/ / the name this.$refs.child.$emit ("childFun")},},} in the child component $on

The effects of the two implementation methods are the same.

Before calling the method:

After calling the method:

The child component calls the event method in the parent component

Call the method of the parent component directly in the child component through this.$parent

/ / Father.vue I am the parent component {{msg}} import Child from'. / Child'; export default {data () {return {msg:''}}, components: {Child}, methods: {fatherMethod () {console.log ('methods in my parent component') This.msg ='my method was called by the child component';}; / / Child.vue I am the child component click to call the parent component method export default {methods: {childMethod () {this.$parent.fatherMethod ();}

In the child component, use $emit to trigger an event to the parent component, which listens for the event (recommended)

/ / Father.vue I am the parent component {{msg}} import Child from'. / Child'; export default {data () {return {msg:''}}, components: {Child}, methods: {fatherMethod () {console.log ('methods in my parent component') This.msg ='my method was called by subcomponent';}

Child components can use $emit to trigger custom events for the parent component.

/ / Child.vue I am a child component Click to call the parent component method export default {methods: {childMethod () {/ / fatherMethod parent component method this.$emit ('fatherMethod');}

The parent component passes the method into the child component and invokes the method directly in the child component:

/ / Father.vue I am the parent component {{msg}} import Child from'. / Child'; export default {data () {return {msg:''}}, components: {Child}, methods: {fatherMethod () {console.log ('methods in my parent component') This.msg ='my method was called by subcomponent';}

The parent component can bind events to the child component tag, and the child component uses props to receive events from the parent component.

/ / Child.vue I am a child component Click to call the parent component method export default {props: {type: Function, default: null}}, methods: {childMethod () {if (this.fatherMethod) {this.fatherMethod ();}

The effects of the above three implementation methods are the same.

Before calling the method:

After calling the method:

Thank you for your reading, the above is the content of "parent-child component communication and event trigger method in Vue". After the study of this article, I believe you have a deeper understanding of the method of parent-child component communication and event trigger in Vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.