vue 中的 provide 和 inject 用法
provider/inject：简单来说就是在父组件 provide 中提供变量，子组件 inject 中来注入，然后可以在子组件内部使用 provide 的变量
需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。
App.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<template> <div id="app">
<div>
<second/>
</div>
</div>
</template><script>import second from './components/Second'
export default {
name: 'app',
components: {
second
},
provide: {
test: 'App 根组件的 provide'
},
data() {
return {
}
},
methods: {
}
}
</script><style></style> |
Second.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<template> <div>
<p>second: {{ test }}</p>
<third/>
</div>
</template><script>import third from './Third.vue';
export default {
name: 'second',
components: {
third
},
inject: ['test'],
data() {
return {
}
},
methods: {
}
}
</script><style></style> |
Third.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<template> <div>
<p>third: {{ test }}</p>
</div>
</template><script> export default {
name: 'third',
components: {},
inject: ['test'],
data() {
return {
}
},
methods: {
}
}
</script><style></style> |