Vue
中父组件到子组件的通信主要由子组件的props
属性实现。但是在一些情况下,父组件无法直接向子组件的props
传值。比如子组件通过父组件的slot
进入父组件,父组件根本不知道子组件是谁,更不用说用子组件的props
了。这时应该怎么办呢?Vue
在2.2.0
版本引入了provide
与inject
,正好适合处理这一情况。
什么是provide与inject
用文档的话说:
provide
/inject
需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。
这就是说从父组件的provide
属性传入一个对象,子组件(或者是孙组件,只要是子级组件)可以用inject
属性接收父组件的provide
属性。比如
// main.vue
<template>
<c1 message="hello world">
<c2></c2>
</c1>
</templat