vue 依赖注入使用教程

news2024/11/15 4:24:27

vue 中的依赖注入，官网文档已经非常详细，笔者在这里总结一份

1、背景介绍

2、代码实现

2.1、依赖注入固定值

2.2、依赖注入响应式数据

3、注入别名

4、注入默认值

5、应用层 Provide

6、使用 Symbol 作注入名

1、背景介绍

为什么会出现依赖注入呢？其实它是要解决 Prop 逐级透传问题

Prop 逐级透传问题，即通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props，如果只是父传子，这样层级不深的结构，是比较简单的；如果是层级非常深，祖太爷、太爷、爷、父、子、孙、重孙组件......，这样多层级嵌套的组件，形成了一颗巨大的组件树，此时，如果重孙组件需要祖太爷组件中的部分数据，在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦。而且中间的爷、父等组件可能根本不关心这些 props，为了使重孙组件能够访问到它们，仍然需要定义并向下传递。如果组件链路非常长，可能会影响到更多这条路上的组件。这一问题被称为“prop 逐级透传”

vue 中提供 provide 和 inject 可以帮助我们解决这一问题，一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖

下图摘自vue官网

2、代码实现

下面代码实现依赖注入

新建vue项目，这里笔者定义3个组件。图书馆组件Library（爷），图书组件Book（父）、标题组件Title（孙），实现图书馆组件Library（爷）提供数据，标题组件Title（孙）注入使用

项目结构

2.1、依赖注入固定值

图书馆组件Library（爷）提供 bookName

<template>
    <div>
        <h1>图书馆</h1>
        <Book/>
    </div>
</template>
<script>
import Book from './Book.vue'
export default {
    components: {
        Book
    },
    provide: {
        bookName: '三国演义'
    },
}
</script>

图书组件Book（父）

<template>
    <div>
        <h2>书名</h2>
        <Title />
    </div>
</template>
<script>
import Title from './Title.vue'
export default {
   components: {
    Title
   }
}
</script>

标题组件Title（孙），注入bookName

<template>
    <div>
        <p>标题</p>
        <p>{{bookName}}</p>
    </div>
</template>
<script>
export default {
    inject: ['bookName'],
}
</script>

App.vue，引入图书馆组件Library

<template>
  <Library />
</template>

<script>
import Library from './components/Library.vue'

export default {
  name: 'App',
  components: {
    Library
  }
}
</script>

运行效果

2.2、依赖注入响应式数据

上例2.1依赖注入的 bookName 是个固定的值，本例将 bookName 改成响应式数据

图书组件Book（父）和标题组件Title（孙）不需要改，只改图书馆组件Library（爷）即可

图书馆组件Library（爷）

为保证注入方和供给方之间的响应性链接，需要使用 computed() 函数提供一个计算属性

<template>
    <div>
        <h1>图书馆</h1>
        <button @click="changeBookName">修改书籍名称</button>
        <Book/>
    </div>
</template>
<script>
import { computed } from 'vue'
import Book from './Book.vue'
export default {
    components: {
        Book
    },
    provide() {
        return {
            bookName: computed(()=>this.bookName)
        }
    },
    data() {
        return {
            bookName: '三国演义'
        }
    },
    methods: {
        changeBookName() {
            this.bookName = '西游记'
        }
    }
    
}
</script>

图书组件Book（父）

<template>
    <div>
        <h2>书名</h2>
        <Title />
    </div>
</template>
<script>
import Title from './Title.vue'
export default {
   components: {
    Title
   }
}
</script>

标题组件Title（孙）

<template>
    <div>
        <p>标题</p>
        <p>{{bookName}}</p>
    </div>
</template>
<script>
export default {
    inject: ['bookName'],
}
</script>

运行效果

点击按钮，修改图书名称

3、注入别名

上面例子中标题组件Title（孙）中注入的 bookName，使用是也是bookName，即访问的本地属性名和注入名是相同的；如果我们想要用一个不同的本地属性名注入该属性，我们需要在 inject 选项的属性上使用对象的形式

看下面代码

注入bookName，本地属性使用 name

<template>
    <div>
        <p>标题</p>
        <p>{{name}}</p>
    </div>
</template>
<script>
export default {
    inject: {
        name: {
            from: 'bookName'
        }
    }
}
</script>

4、注入默认值

如果注入的属性没有任何组件提供，则会抛出一个运行时警告，如果注入一个值时不要求必须有提供者，那么我们应该声明一个默认值，和 props 类似

将图书馆组件Library（爷）中的provide注释掉

<template>
    <div>
        <h1>图书馆</h1>
        <button @click="changeBookName">修改书籍名称</button>
        <Book/>
    </div>
</template>
<script>
import { computed } from 'vue'
import Book from './Book.vue'
export default {
    components: {
        Book
    },
    // provide() {
    //     return {
    //         bookName: computed(()=>this.bookName)
    //     }
    // },
    data() {
        return {
            bookName: '三国演义'
        }
    },
    methods: {
        changeBookName() {
            this.bookName = '西游记'
        }
    }
    
}
</script>

图书组件Book（父）不变

<template>
    <div>
        <h2>书名</h2>
        <Title />
    </div>
</template>
<script>
import Title from './Title.vue'
export default {
   components: {
    Title
   }
}
</script>

标题组件Title（孙）中添加注入的默认值

<template>
    <div>
        <p>标题</p>
        <p>{{name}}</p>
    </div>
</template>
<script>
export default {
    inject: {
        name: {
            from: 'bookName',
            default: '红楼梦'
        }
    }
}
</script>

运行效果

5、应用层 Provide

除了在一个组件中提供依赖，我们还可以在整个应用层面提供依赖

在 main.js 中提供依赖

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.provide('title', '古典名著')
app.config.unwrapInjectedRef = true
app.mount('#app')

在标题组件Title（孙）中注入title

<template>
    <div>
        <p>标题</p>
        <p>{{ title }}</p>
        <p>{{name}}</p>
    </div>
</template>
<script>
export default {
    inject: {
        name: {
            from: 'bookName',
            default: '红楼梦'
        },
        title: {}
    }
}
</script>

运行效果

6、使用 Symbol 作注入名

如果有非常多的依赖提供，建议最好使用 Symbol 来作为注入名以避免潜在的冲突

笔者在components目录下定义keys.js文件

keys.js 文件内容

export const bookName = Symbol()

在图书馆组件Library（爷）中引入keys.js

<template>
    <div>
        <h1>图书馆</h1>
        <button @click="changeBookName">修改书籍名称</button>
        <Book/>
    </div>
</template>
<script>
import { computed } from 'vue'
import Book from './Book.vue'
import { bookName } from './keys.js'
export default {
    components: {
        Book
    },
    provide() {
        return {
            [bookName]: computed(()=>this.bookName)
        }
    },
    data() {
        return {
            bookName: '三国演义'
        }
    },
    methods: {
        changeBookName() {
            this.bookName = '西游记'
        }
    }
    
}
</script>

在标题组件Title（孙）中引入keys.js

<template>
    <div>
        <p>标题</p>
        <p>{{ title }}</p>
        <p>{{name}}</p>
    </div>
</template>
<script>
import { bookName } from './keys.js'
export default {
    inject: {
        name: {
            from: bookName,
            default: '红楼梦'
        },
        title: {}
    }
}
</script>

运行效果