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

This article mainly introduces how to achieve non-parent-child components in vue communication, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

1. Provide and Inject

Provide and Inject are used to share data between non-parent and child components, for example, there are some deeply nested components, and the child component wants to obtain the data of the parent component. If there are no Provide and Inject options, we can pass the data once through props, but this is too cumbersome.

For the above cases, we can use Provide and Inject to serve as a provider of child component data no matter how deeply the component structure is nested.

The parent component has a Provide to provide data.

The child component has an Inject to get the data.

In practice, the parent component does not know which child component uses its data, and the child component does not know which parent component's data is being used.

Basic use of Provide and Inject

/ / parent component import Content from ". / components/Content.vue"; export default {data () {return {};}, provide: {name: "Zhang San", age:20}, components: {Content}}; / / Child component here is Content component {{name}}-{{age}} import ContentBase from ". / ContentBase.vue"; export default {data () {return {} }, components: {ContentBase}, inject: ["name", "age"]}; / / Sun component here is contentBase component {{name}}-- {{age}} export default {data () {return {};}, inject: ["name", "age"]}

The final display result is:

2. Another way to write Provide and Inject

Let's think about a situation, if the data that Provide gets is the data that data gets, what if we get it at this time? Can this be used at this time?

Import Content from ". / components/Content.vue"; export default {data () {return {source: [111,222,333]};}, provide: {name: "Zhang San", age:20, res: this.source.length / / We add res at this time and want to get the length of the array through this.source.length}, components: {Content}}

The result is wrong.

The error message shows that we read the attribute from the undefined, and the this is undefined. Why: we can see from the above code that this points to undefiend (because this executes the outermost layer).

Solution method

We set Provide as a function and return an object, as shown in the following code:

Import Content from ". / components/Content.vue"; export default {data () {return {source: [111,222,333 "],};}, provide () {return {name:" Zhang San ", age: 20, res: this.source.length,};}, components: {Content,},}

Display the results:

At this point, let's think about another question: if we add an element to the data array, will the length of the array obtained elsewhere change?

Click import Content from ". / components/Content.vue"; export default {data () {return {source: [111,222,333 "],};}, provide () {return {name:" Zhang San ", age: 20, res: this.source.length,} }, components: {Content,}, methods: {/ / add click event addOneItem () {this.source.push ("nnn") console.log (this.source)}

As shown in the figure above, you can see that the data is added, but the subcomponents do not detect changes in the data.

At this point we can use computed to detect changes in this.source.length, as shown in the following code.

Click import Content from ". / components/Content.vue"; import {computed} from "vue" / / introduce computedexport default {data () {return {source: [111,222,333 "],} from vue }, provide () {return {name: "Zhang San", age: 20, res: computed (() = > this.source.length), / / add computed} here;}, components: {Content,}, methods: {addOneItem () {this.source.push ("nnn") console.log (this.source)}

Because what we get through computed is an object, we get the value through the value property.

3. Global event bus mitt library

In vue2, if we use the event bus, we can use this.$bus = new Vue (), that is, to instantiate a vue object. But we can't use it that way in vue3. So we use the third-party library to realize the communication between components. This third-party library is mitt

I. installation

Npm install mitt

Introduce and initialize the export in the file.

Import mitt from "mitt"; const emitter = new mitt () export default emitter

To listen for an event, the first argument is the event name and the second argument is the callback function.

Emitter.on ("why", (data) = > {console.log (data)}) / / * indicates that all events can be listened for. Emitter.on ("*", (type, data) = > {console.log (type, data))

Cancel event

/ / cancel all snooping emitter.all.clear () in emitter / or / / define a function function onFoo () {} emitter.on ("foo", onFoo) emitter.on ("foo", onFoo) Thank you for reading this article carefully. I hope the article "how to implement Communication between non-parent and son components in vue" shared by the editor will be helpful to you. At the same time, I hope you will support it and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.