Vue插槽-作用域在子类元素中不工作。

Question

给定以下组件配置：

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

从这样的模板中调用组件，不会将msg值绑定到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

时隙范围是否仅限于直接子元素，为什么？

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

例如

​

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>元素以及绑定到它的内容。当它用提供给组件的内容替换<slot>时，在决定要计算哪些属性和绑定哪些数据时，它会查看该根元素。它不会向下查看该元素的层次结构。