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

Question

给定以下组件配置:

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

像这样从模板中调用组件，不会将 msg 值绑定(bind)到 grand-child 元素中:

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

slot-scope 是否仅限于直接子元素，为什么？

Answer 1

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

是的。这是因为 <slot>组件中的元素被传入的内容替换。当 Vue 找到 slot-scope 时组件内容元素上的属性(即您的<div class="parent">)，它绑定(bind)所有v-bind在 <slot> 中找到的属性到那个命名空间。

例如

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>

为了进一步解释，假设 Vue 将所有 HTML 元素视为渲染函数。考虑到这一点，它会查看 <slot>。元素及其绑定(bind)的内容。当它替换 <slot> 时有了提供给组件的内容，它会在决定评估哪些属性和绑定(bind)哪些数据时查看根元素。它不会向下查看该元素的层次结构。