provider/inject：簡單來說就是在父組件 provide 中提供變量，子組件 inject 中來注入，然后可以在子組件內部使用 provide 的變量
需要注意的是這里不論子組件有多深，只要調用了inject那么就可以注入provider中的數據。而不是局限於只能從當前父組件的prop屬性來獲取數據。
App.vue
<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
<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
<template>
<div>
<p>third: {{ test }}</p>
</div>
</template>
<script>
export default {
name: 'third',
components: {},
inject: ['test'],
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>