Vue slot-scope 在孙元素中不起作用

Question

Given the following component configuration:

Vue.component('myComponent', {
    data () {
        return {
          msg: 'Hello',
        }
      },
    template: `
      <div class="my-component">
          <slot :msg="msg"></slot>
      </div>
    `,
})

Calling out the component from a template like this, doesn't bind the msg value inside the grand-child element:

<my-component>
    <div class="parent">
        <div class="child">
            <div class="grand-child" slot-scope="{ msg }">
               {{ msg }}
            </div>
        </div>
    </div>
</my-component>

Is slot-scope restricted to direct child element, and why?

Answer 1

Is slot-scope restricted to direct child element, and why?

Yes. This is because the <slot> element within the component is replaced with the content passed in. When Vue finds the slot-scope attribute on the component content element (ie, your <div class="parent"> ), it binds all the v-bind attributes found in the <slot> to that namespace.

For example

 Vue.component('myComponent', { data () { return { msg: 'Hello', } }, template: ` <div class="my-component"> <slot :msg="msg"></slot> </div> `, }) new Vue({el: '#app'})

 .parent, .child, .grand-child { border: 1px solid; padding: 2px; } .parent:before, .child:before, .grand-child:before { content: attr(class); display: block; color: #999; font-size: 0.8em; }

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> <div id="app"> <my-component> <div class="parent" slot-scope="{ msg }"> <div class="child"> <div class="grand-child"> {{ msg }} </div> </div> </div> </my-component> </div>

To attempt to explain further, consider that Vue treats all HTML elements as render functions. With this in mind, it looks at the <slot> element and what is bound to it. When it replaces the <slot> with the content provided to the component, it looks at that root element when deciding what attributes to evaluate and what data to bind. It does not look down into that element's hierarchy.