Here is the component configuration being discussed:
Vue.component('myComponent', {
data () {
return {
msg: 'Hello',
}
},
template: `
<div class="my-component">
<slot :msg="msg"></slot>
</div>
`,
})
The issue arises when trying to bind the msg value inside the grand-child element by calling out the component from a template like this:
<my-component>
<div class="parent">
<div class="child">
<div class="grand-child" slot-scope="{ msg }">
{{ msg }}
</div>
</div>
</div>
</my-component>
This raises the question of whether slot-scope is restricted to the direct child element, and if so, why?