This is the 17th day of my participation in the August Text Challenge.More challenges in August

In this article we look at the last three applications, APIprovide, use, and version use, and what we need to be aware of.

provide

We need to know that provide and inject are like heroes and heroes, they should be used together. Typically, when we need to pass data from a parent component to a child component, we use props. But what if there are some deeply nested components, and the deep child component only needs part of the parent component? You might think we could use VUex or still pass prop down the component chain, but if that’s cumbersome or unnecessary, we could use provide and inject instead.

Simple to use

No matter how deep the component hierarchy is, a parent component can act as a dependent provider for all its children. 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 that data.

Assume three custom components, as follows:

/ / the parent component
app.component('my-component', {
    provide: {
        user: 'SLifree'
    },
    template: `<h1> Hello,world! <slot/></h1>`
})
/ / child component
app.component('my-component-item', {
    template: ` My name is 
        ! `
})
// Child components
app.component('my-component-item-name', {
    inject: ['user'].template: `<span>{{user}}</span>`
})
Copy the code

Use as follows:

<my-component>
    <my-component-item>
        <my-component-item-name></my-component-item-name>
    </my-component-item>
</my-component>
Copy the code

Render: Hello,world! My name is SLifree ! My-component-item-name can be used directly with my-Component data. The user element in the component is fixed. How about rendering data based on the component instance property? The provide is converted to a function that returns an object, as follows:

app.component('my-component', {
    props: ['name'].provide() {
        return { user: this.name }
    },
    template: `<h1> Hello,world! <slot/></h1>`
})
Copy the code

Use as follows:

<my-component :name="?????">Content is same as above</my-component>
Copy the code

The user value of the render result is the name value of the my-Component, but this result does not change with the name, it only renders the first value. If we need a dynamic response, we need to use the following method.

The dynamic response

In the example above, if the render results change as the name changes, we need to assign a combined API computed Property to the user provided, My-component-item-name and my-Component components will change as follows:

app.component('my-component', {
    props: ['name'].provide() {
        return { 
            // Computed is Vue's method of making this data responsive
            user: computed(() = > this.name)
        }
    },
    template: `<h1> Hello,world! <slot/></h1>`
})

app.component('my-component-item-name', {
    inject: ['user'].// The user is changed to: user.value
    template: `<span>{{user.value}}</span>`
})
Copy the code

Use as follows:

<my-component :name="?????">
    <my-component-item>
        <my-component-item-name></my-component-item-name>
    </my-component-item>
</my-component>
Copy the code

At this point, the render result will be arbitrary. Change and change.

use

Install vue.js plug-in. If the plug-in is an object, it must expose an install method. If it were a function itself, it would be treated as an install method. In this article, we won’t go over how plug-ins are written, but just how use is used.

Suppose a plugin, MyPlugin, is used as follows:

app.use(MyPlugin)
Copy the code

We use this method, we can package their own plug-in, or for the project written plug-in to install, to facilitate our subsequent use.

version

As the name implies, this method is used to detect the Vue version, providing the version number of the installed Vue as a string. We can get the version number to do the corresponding operations, such as different requirements for different versions, plug-ins, and so on. In fact, is to do compatibility processing, to plug-in for example:

export default {
  install(app) {
    const version = Number(app.version.split('. ') [0])
    if (version < 3) {
      console.warn('This plugin requires Vue 3')}// ...}}Copy the code

We can handle it according to the version number.

conclusion

1. Provide and inject are used together. Provide provides data, and inject uses data.

2. Provide mainly describes the use of component communication, but we can also define a global property: app.provide(‘user’, ‘administrator’) so that we can use this data in any component.

For more articles, the portal has opened: Look back at the Vue3 catalogue!