Vue.component('my-child', {
inject: ['test'],
template: `
<div>
<h3>儿子组件</h3>
<p>{{ test.title }}</p>
<my-child-child />
</div>
`
})
Vue.component('my-child-child', {
inject: ['test'],
template: `
<div>
<h3>孙子组件</h3>
<p>{{ test.title }}</p>
</div>
`
})
new Vue({
el: '#app',
provide() {
return {
test: this
}
},
data() {
return {
title: '异步组件'
}
}
})
<div id="app">
<h1>{{ title }}</h1>
<my-child />
</div>