provideinject

概述

provide/inject：简单的来说就是在父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provide中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

写法

provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性

// 传入对象写法 provide: { foo: 'bar' } // 函数写法 provide () { return { foo: 'bar' } }

inject ：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名

// 父级组件提供 'foo' var Provider = { provide: { foo: 'bar' }, // ... } // 子组件注入 'foo' var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ... }

实现 provide / inject 可监听

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

// App.vue 组件 (父组件) export default { name: 'electron-xdf', data () { return { asideW: '200px', _path: null }; }, created () { this._path = this.$route.path; }, provide() { return { INFO: this // 传递可响应对象 }; }, methods:{ upprovide(){ this.asideW = '500px'; // 修改 属性值得变化，可以传递到 子孙后代的任意组件 同时响应变化 } } } // 子组件 export default { props: {}, computed: {}, name: 'process-communication', data () { return { count: 0 }; }, inject: ['INFO'], methods: { upprovide(){ // 这里修改之后 App.vue 也会响应数据的变化 this.INFO.asideW = '200px'; } } };

 

刷新vue组件

这样实现了子组件调取reload方法就实现了刷新vue组件的功能,个人认为它实现了组件跨越组件传递数据方法。

// App.vue 组件 (父组件) <template> <div id="app" > <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', components: { MergeTipDialog, BreakNetTip }, data () { return { isShow: false, isRouterAlive: true }, // 父组件中返回要传给下级的数据 provide () { return { reload: this.reload } }, methods: { reload () { this.isRouterAlive = false this.$nextTick(() => { this.isRouterAlive = true }) } } } </script> // 子组件 <template> <popup-assign :id="id" @success="successHandle" > <div class="confirm-d-tit"><span class="gray-small-btn">{{ name }}</span></div> <strong>将被分配给</strong> <a slot="reference" class="unite-btn" > 指派 </a> </popup-assign> </template> <script> import PopupAssign from '../PopupAssign' export default { //引用vue reload方法 inject: ['reload'], components: { PopupAssign }, methods: { // ...mapActions(['freshList']), async successHandle () { this.reload() } } } </script>

参考：https://www.jb51.net/article/139769.htmhttps://blog.csdn.net/qq_15253407/article/details/91490210https://www.jianshu.com/p/d34a7df4cd6a