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

This article mainly explains the "what are the methods for components to communicate with each other in vue". The content in the article is simple and clear, and it is easy to learn and understand. Please follow Xiaobian's train of thought to study and learn "what are the methods of communicating values between components in vue".

The way in which components communicate with each other in vue

When we use vue for project development, in order to better manage the project, we will package each function into components, and directly introduce and call components to achieve code reuse.

When we encapsulate components, we often leave some reserved interfaces for calling and passing in different data. at this time, we are related to the problem of passing values to each other before components.

I have summarized here how to pass values to each other before components in vue:

1. The child component communicates with the parent component, and I am the parent component by calling the parent component to customize the attribute value to the component:

This is my own data {{num}}.

Import child from'. / child.vue' export default {name: 'parent', data () {return {num: 10, num2: 20}}, methods: {changeNum (n) {this.num = n } I am a subcomponent:

This is to receive the data {{pNum}} from the parent component through props.

This is to get the data passed by the parent component {{$attrs ['pmurnum2']} through the $attrs object in the component.

This is to get the data passed by the parent component {{topNum}} through the $attrs object in the component.

Change parent data through $emit change parent data through $listeners change parent data via $parent change parent data export default {name: 'child' / / first, you can use the props object to receive the property passed by the parent: props: {/ / here write the corresponding property name to receive pNum: {type: Number} in the form of hump. Data () {return {topNum: 0}}, created () {/ / get the instance of the parent component by using $parent in the instance Then get the value this.topNum = this.$parent.num }, methods: {changeNum () {/ / here the method passed by the parent is called through the $emit method in the current component, and the parameter this.$emit ('changePNum', 40) can be passed in }, changeNum2 () {/ / calls this.$listeners.changePNum (50) through a method passed by the parent of the storage in $listeners in the component }, changeNum3 () {/ / calls this.$parent.changeNum (60) through a method passed by the parent stored in $listeners in the component;}

The above code shows the mode of communication between two different forms of components. The parent component passes values in the same way, and the child component acquires different operations.

1.props/$emit composition: the child component obtains the properties passed by the parent component to the child component by defining the props value; the child component invokes the parent component's method by using the $emit method

2.$attrs/$listeners composition: the child component can get the property value passed by the parent component to the child component through the value in the $attrs attribute, which stores attribute values other than props

The 3.$parent method gets the data and methods in the parent component

2. The parent component actively acquires the child component data through the $refs call child component method to change the child component data. The $children invocation child component method changes the child component data.

This is the data of the acquired subcomponent childA: {{childA_num}}

This is the data of the acquired subcomponent childB: {{childB_num}}

Import childA from'. / childA.vue'; import childB from'. / childA.vue' Export default {components: {childA, childB}, data () {return {childA_num: 0, childB_num: 0}}, created () {} Mounted () {/ / $refs and $children both need to be in mounted to get / / here get the sub-component instances registered in it through $refs And get his data this.childA_num = this.$refs.childA.num / / the second way to get the subcomponent instance this.childB_num = this.$children [1] .num through $children in the current component example }, methods: {changeChildANum () {/ / here the method this.$refs.childA.changeNum () in the component is called by using the component instance in $refs }, changeChildBNum () {/ / here call the method this.$children [1] .changeNum () in the component by using the component instance in $refs }} export default {name: 'childA', data () {return {num: 10}}, methods: {changeNum () {this.num++;}

1.ref/$refs way, by defining a ref property for the introduced component, and then combining this property with $refs is worth going to the instance of the current component

2.ref/$children property, after defining the ref value for the component, the current component instance will get all the component arrays that define ref in the component instance, and we are getting the value of the latter property of a subcomponent through the subscript.

3. Use provide/inject method to realize import child from'. / child.vue' Export default {/ / defines a provide object to the parent, defines it as a function, and then returns a parentData object that points to a data object in the current component This is equivalent to pointing to an object provide () {return {parentData: this.proVideData}} name: 'Parent', components: {child}, data () {return {proVideData: {num, 1 ChangeNum: null}, created () {/ / then pass in this.proVideData.changeNum = this.changeNum the method that needs to be called by the subcomponent after instantiation }, methods: {changeNum () {this.proVideData.num++;}

{{parentData.num}}

Call the parent method export default {/ / the child component receives the data broadcast by provide in the ancestor component through inject: inject: ['parentData'], name:' child', data () {return {}} Methods: {parFun () {/ / the stored method this.parentData.changeNun () is executed directly here }}}

The basic principle here is to configure the provide property to the ancestor component, and then store the property value that you want to pass to the descendant component.

Then in the descendant component, if you need to get the propagated data, you can configure the injuct property for the component itself to receive the data value you want to listen for.

And then you can communicate.

4. Use event bus

This method can be used to listen for currently defined methods in any component. To realize that components communicate with each other

Import Vue from 'vue';// here creates a new vue instance object export const EventBus = new Vue (); / / introduces the event bus import {EventBus} from'. / event-bus' Export default {data () {return {eventBusMsg:''}}, created () {/ / then bind a method to the event bus that needs to be listened to, similar to the EventBus.$on for publishing subscribers to add subscriptions ("eventBusMsg", (msg) = > {console.log (msg); this.eventBusMsg = msg;}) }, beforeDestroy () {EventBus.$small ("eventBusMsg");}} calling the component's methods through the event bus / / other components also require you to introduce the plug-in import {EventBus} from'. / event-bus' Export default {data () {}, created () {}, methods: {eventBusChange () {/ / here a subscribed message method is called through eventBus, passing the value past EventBus.$emit ('eventBusMsg',' childB');}

The event bus is called by:

1. Define a global vue example and export

two。 Then introduce event-bus into components that need to listen for an event

3. Add a method to the created method to the current component

4. Then the subcomponent can import the event-bus file and then perform the listening time method through EventBus.$emit.

5. Vuex\ localStorage\ sessionStorage

You can also use Vuex, local storage, and so on to achieve global public.

Thank you for your reading, these are the contents of "what are the methods of communicating values between components in vue?" after the study of this article, I believe you have a deeper understanding of the method of communicating values between components 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.