vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue provide与inject使用及说明

vue高级组件之provide与inject使用及说明

作者:Garrettzxd

这篇文章主要介绍了vue高级组件之provide与inject使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue provide与inject使用及说明

vue中不同组件通信方式如下

 通常是以上两种情况,然而还有一种比较特殊的情况,即孙子组件或更深层次的组件通信

1.下面是a.vue

<template>
    <div class="test">
        <son prop="data"></son>
    </div>
</template>

2.下面是son.vue

<template>
    <div>
        <grandson prop="data"></grandson>
    </div>
</template>
 
<script>
export default {
    name: 'Son',
    props: ['data'],
}
</script>

很容易看出,如果父组件需要与grandson通信,除了vuex,必须先与son组件通信,再由son与grandson通信,在层级比较少的情况下也无可厚非,但是层级一旦多起来是很可怕的

有人会问为什么不用vuex,简单省事,有很多为了这个引入vuex会导致代码性价比比较低,项目本身没有使用vuex的必要

那么这种情况下provide / inject就登场了

因为以上两者可以在父组件与子组件、孙子组件、曾孙子...组件数据交互,也就是说不仅限于prop的父子组件数据交互,只要在上一层级的声明的provide,那么下一层级无论多深都能够通过inject来访问到provide的数据

1.父级组件如下

<template>
    <div class="test">
        <son prop="data"></son>
    </div>
</template>
 
<script>
export default {
    name: 'Test',
    provide: {
        name: 'Garrett'
    }
}

2.孙子组件,注意这里是孙子组件,父级 -> 子组件 -> 孙子组件三个层级关系

<template>
    <div>
        {{name}}
    </div>
</template>
 
<script>
export default {
    name: 'Grandson',
    inject: [name]
}
</script>

这里可以通过inject直接访问其两个层级上的数据,其用法与props完全相同,同样可以参数校验等

缺点

这么做也是有明显的缺点的,在任意层级都能访问导致数据追踪比较困难,不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了,因此这个属性通常并不建议使用能用vuex的使用vuex,不能用的多传参几层,但是在做组件库开发时,不对vuex进行依赖,且不知道用户使用环境的情况下可以很好的使用

vue3中父子组件传值(provide/inject)

在vue3中的父子组件一般都用provide 和 inject 传值

父组件中引入和注册了子组件之后

在script标签下引入provide就可以将父组件中的变量或方法传递出去

在子组件中就可以用inject来接收一下 不管子组件的层级有多深都可以接收到

具体操作

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文