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

This article mainly introduces the relevant knowledge of "methods provided and injected by Vue3". The editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "methods provided and injected by Vue3" can help you solve the problem.

Provide and inject

Typically, we use props when we need to pass data from the parent component to the child component. Imagine a structure like this: you have some deeply nested components, and you only need something from the parent component of the deeply nested child component. In this case, you still need to pass the prop to the entire component chain, which can be annoying.

In this case, we can use provide and inject pairs. The parent component can act as a dependency provider for all its child components, regardless of the depth of the component hierarchy. This feature has two parts: the parent component has a provide option to provide data, and the child component has an inject option to start using this data.

Ue for example, if we have a hierarchy like this:

Root

└─ TemplateM

├─ TestCom

If our child component needs to call the parent component's method, we can use provide/inject to pass in the parent component's Vue instance object:

Import TestCom from'. / TestCom'

Export default {

Name: "TemplateM"

Components: {

TestCom

}

Provide: {

Parent: "this"

}

Data () {

Return {

FirstName: 'dsdsdd'

LastName: 'Ken'

}

}

Methods: {

Submit (options) {

Console.log (options)

}

}

}

Then inject the parent property of the parent component into the child component:

{{title}}

Button

Export default {

Name: "TestCom"

Props: {

Title: {

Type: String

Default: ""

}

}

Inject: ['parent']

Emits: ['click-event']

Created () {

Console.log (this.$attrs)

}

Methods: {

Click (e) {

Console.log (this.parent)

This.$emit ('click-event', e)

}

}

}

View the browsing effect as follows:

However, if we try to provide some component instances property here, this will not work:

Provide: {

TodoLength: this.todos.length / / will result in error 'Cannot read property' length' of undefined--

}

To access the component instance property, we need to convert provide to a function that returns the object, and then we pass the instance of the parent component to the child component so that we can access the properties of the parent component in the child component:

Import TestCom from ". / TestCom"

Export default {

Name: "TemplateM"

Components: {

TestCom

}

Provide () {

Return {parent: this}

}

Data () {

Return {

FirstName: "dsdsdd"

LastName: "Ken"

}

}

Methods: {

Submit (options) {

Console.log (options)

}

}

}

Use parent in subcomponents:

{{title}}

Button

Export default {

Name: "TestCom"

Props: {

Title: {

Type: String

Default: ""

}

}

Inject: ['parent']

Emits: ['click-event']

Created () {

Console.log (this.$attrs)

}

Methods: {

Click (e) {

Console.log (this.parent)

This.$emit ('click-event', e)

}

}

}

View the browsing effect as follows:

This allows us to continue to develop the component more safely without having to worry about changing / deleting something on which the subcomponent depends. The interfaces between these components are still clearly defined, just like prop.

In fact, you can think of dependency injection as "long range props", except for:

The parent component does not need to know which child components use the property it provides

Subcomponents do not need to know where inject property comes from

This is the end of the introduction to "methods provided and injected by Vue3". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.