inject 响应式_跨级组件通信之provide/inject

介绍

在深层次的组件通信中，我们除了使用中央事件总线eventbus外，还可以使用组件的依赖注入方法及provide/inject。

provide选项允许我们指定我们想要提供给后代组件的数据/方法。

如果提供的是方法

provide: function () {
  return {
    fun: this.fun
  }
}

如果提供的是数据

provide: function () {
  return {
    name: 'Bob'
  }
}

然后在任何后代组件里，我们都可以使用inject选项来接收指定的我们想要添加在这个实例上的属性：

//接受方法
inject: ['fun']
//接受数据
inject:['name']

实例演示

创建parent.vue，提供变量name，并调用children1组件

<template>
    <div>
        <children1>children1>
    div>
template>
<script>import Children1 from './children1'export default {
    data() {return {
        }
    },components:{
        Children1
    },
    provide(){return{name:'我是你爷爷'
        }
    }
}script>

创建children1.vue，并在其中调用children2.vue

<template>
    <div>
        <children2>children2>
    div>
template>
<script>import Children2 from './children2'export default {components:{
       Children2
   }
}script>

创建children2.vue，并在其中注入祖先提供的变量

<template>
    <div>
        <label for="child">孙子收到信息：<input type="text" name="" id="child" :value="name">label>
    div>
template>
<script>export default {inject:['name']
}script>

结果

通俗来讲，你可以把依赖注入看作一部分“大范围有效的 prop”， 祖先组件不需要知道哪些后代组件使用它提供的属性，后代组件不需要知道被注入的属性来自哪里。

但是，它还是有一定的负面效果。它将你应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。同时所提供的属性是非响应式的。

provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

官方文档也说了，如果想要想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像Vuex这样真正的状态管理方案了。

今天的内容到此结束了，希望可以帮到你。

下一节，我们讲Vuex。

历史内容

What exactly is Node.js？

用node搭建一个服务器

补充总结node

loading小案例

国产浏览器的发展史

浏览器发展史

组件的通信--eventBus