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

In this issue, the editor will bring you about how to achieve data communication between components in Vue. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Parent component = > child component

In the previous chapter, we mentioned that we can use the prop option to define some custom properties in the component. When a value is passed to the prop property, that prop property becomes a property of that component instance, and we can get the received value from the component. Therefore, here we can dynamically bind a prop property through the v-bind instruction when using the child component, thus receiving the value passed by the parent component.

As you can see in the following sample code, we bind a prop attribute parenttitle in the child component through the v-bind instruction to receive the title property in the parent component data option, and then listen on the bound parenttitle property through the watch listening property to synchronously update the content property value in the child component data option.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

thirty-six

thirty-seven

thirty-eight

thirty-nine

forty

forty-one

forty-two

forty-three

forty-four

Please enter the value you want to pass to the subcomponent:

The attribute value in the Vue instance is: {{content}}

Var vm = new Vue ({

El:'# app'

Data: {

Title:''

}

Components: {

'childNode': {

Template:'# child'

Props: ['parenttitle']

Data () {

Return {

Content: this.parenttitle

}

}

Watch: {

Parenttitle () {

This.content = this.parenttitle

}

}

}

}

})

Child component = > parent component

There is an one-way downlink binding in Vue, and data changes in the parent component can affect the subset component, but not vice versa. In actual development, we may encounter a situation where the parent component needs to be updated synchronously after the data of the child component is updated, so what should we do at this time?

Since there is no way to update the parent component directly by modifying the properties in the prop option, let's think differently. What we want to achieve is that when the data of the child component changes, we can synchronously cause the change of the parent component, so, can we trigger an event method after the data of the child component has changed, tell the parent component that my data has been updated, and the parent component only needs to listen for this event, and then synchronously change the data of the parent component after the event is captured. The whole schematic process is as follows.

So, how can event monitoring be implemented?

Well, Vue has helped us implement the solution. We can use the v-on event listener to listen for events and use $emit to trigger events on the current instance. Of course, the events here can be native DOM events in Javascript or events that we customize.

For example, in the following code, when I click the pass data button, the func method of the child component is triggered, the show event on the child component instance is triggered in the func method, and the value in the input box is passed as a parameter. At this point, we can listen to the show event through the v-on (@) instruction where we use the child component, thus getting the passed parameters and triggering the listening event of the parent component.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

thirty-six

thirty-seven

thirty-eight

thirty-nine

forty

forty-one

forty-two

forty-three

forty-four

forty-five

forty-six

forty-seven

forty-eight

forty-nine

fifty

The attribute value in the subcomponent is: {{msg}}

Please enter the value you want to pass to the parent component:

Transfer data

Var vm = new Vue ({

El:'# app'

Data: {

Title:''

Msg:''

}

Methods: {

ShowMsg (data) {

This.msg = data

}

}

Components: {

'childNode': {

Template:'# child'

Data () {

Return {

ChildMsg:''

}

}

Methods: {

Func () {

This.$emit ('show', this.childMsg)

}

}

}

}

})

This is how to achieve data communication between components in the Vue shared by Xiaobian. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.