Vue组件间通信六种方式（完整版）

Vue2.2.0新增API,这对选项必要一路行使，以应承一个祖先组件向其全部子孙儿女注入一个依靠，岂论组件条理有多深，并在起上下流相关创立的时刻里始终见效。一言而蔽之：祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。

provide / inject API 首要办理了跨级组件间的通讯题目，不外它的行使场景，首要是子组件获取上级组件的状态，跨级组件间成立了一种主动提供与依靠注入的相关。

2.举个例子

假设有两个组件： A.vue 和 B.vue，B 是 A 的子组件

// A.vue 
export default { 
  provide: { 
    name: '浪里行舟' 
  } 
} 

// B.vue 
export default { 
  inject: ['name'], 
  mounted () { 
    console.log(this.name);  // 浪里行舟 
  } 
} 

可以看到，在 A.vue 里，我们配置了一个 provide: name，值为 浪里行舟，它的浸染就是将 name 这个变量提供应它的全部子组件。而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 会见这个变量了，它的值也是 浪里行舟。这就是 provide / inject API 最焦点的用法。

必要留意的是：provide 和 inject 绑定并不是可相应的。这是决心为之的。然而，假如你传入了一个可监听的工具，那么其工具的属性照旧可相应的----vue官方文档

以是，上面 A.vue 的 name 假如改变了，B.vue 的 this.name 是不会改变的，如故是 浪里行舟。

3.provide与inject 怎么实现数据相应式

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!