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-scope是否仅限于直接子元素，为什么？

是的。这是因为组件中的<slot>元素已被传递的内容所替代。当Vue在组件内容元素的上找到slot-scope属性（即您的{{1 }}），它将在<div class="parent">中找到的所有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;
}

要尝试进一步解释，请考虑Vue将所有HTML元素都视为渲染函数。考虑到这一点，它着眼于<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>元素及其绑定的内容。当用提供给组件的内容替换<slot>时，在确定要评估的属性和绑定的数据时，它会查看该根元素。它不会忽略该元素的层次结构。

Vue Slot-scope在孙子元素内部不起作用

1 个答案: