无论如何要在传递给插槽的文本中使用数据属性？

Question

我是 Vue 的新手，但我遇到了问题。我已经搜索过了，但我想我的大脑一定是疯了，因为我不知道如何正确表达这个词。

我有这样的设置：

Vue.component('custom-component', {
  template: '<div><slot></slot></div>',
  data: function() {
    return {
      parent_data: [1, 2, 3, 4, 5]
    }
  }
});

Vue.component('sub-component', {
  props: {
    dataProp: {
      default: []
    }
  },
  data: function() {
    return {
      data: []
    }
  },
  template: '<div class="subs">{{data.length}}<slot></slot></div>',
  mounted: function() {
    this.data = this.dataProp;
  }
});

new Vue({
  el: '#root'
});

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="root">
  <custom-component>
    hello
    <sub-component>
      sub component hello
    </sub-component>
  </custom-component>
</div>

注意parent_data 属性实际上是在 ajax 调用中通过 Vue Resource 定义的，尽管这似乎与此无关。

您会看到我们在浏览器中得到“hello 0 sub component hello”输出。好的，酷。所以我想我会摆弄它并尝试将一些文本放入组件的文本槽中，如下所示：

Vue.component('custom-component', {
  template: '<div><slot></slot></div>',
  data: function() {
    return {
      parent_data: [1, 2, 3, 4, 5]
    }
  }
});

Vue.component('sub-component', {
  props: {
    dataProp: {
      default: []
    }
  },
  data: function() {
    return {
      data: []
    }
  },
  template: '<div class="subs"><slot></slot></div>',
  mounted: function() {
    this.data = this.dataProp;
  }
});

new Vue({
  el: '#root'
});

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="root">
  <custom-component>
    hello
    <sub-component>
      {{data.length}}sub component hello
    </sub-component>
  </custom-component>
</div>

但这不再像我预期的那样有效。为了使这个示例正常工作，我必须做什么？

这个问题更接近现实的部分看起来像这样：

Vue.component('custom-component', {
  template: '<div><slot></slot></div>',
  data: function() {
    return {
      parent_data: [1, 2, 3, 4, 5]
    }
  },
  mounted: function() {
    //this.$http.get('/page/here').then(results=> this.parent_data = results, console.error );
  }
});

Vue.component('sub-component', {
  props: {
    dataProp: {
      default: []
    }
  },
  data: function() {
    return {
      data: []
    }
  },
  template: '<div class="subs"><slot></slot></div>',
  mounted: function() {
    this.data = this.dataProp;
  }
});

new Vue({
  el: '#root'
});

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="root">
  <custom-component>
    hello
    <sub-component :data-prop="parent_data">
      {{data.length}} sub component hello
    </sub-component>
  </custom-component>
</div>

提前致谢！

Answer 1

如果要从槽内的child引用数据，需要使用scoped slots。

这是您最后一个更新为使用作用域插槽的示例。

console.clear()

Vue.component('custom-component', {
  template: '<div><slot :parent_data="parent_data"></slot></div>',
  data: function() {
    return {
      parent_data: [1, 2, 3, 4, 5]
    }
  },
  mounted: function() {
    //this.$http.get('/page/here').then(results=> this.parent_data = results, console.error );
  }
});

Vue.component('sub-component', {
  props: {
    dataProp: {
      default: []
    }
  },
  data: function() {
    return {
      subData: this.dataProp
    }
  },
  template: '<div class="subs"><slot :sub-data="subData"></slot></div>',
  mounted: function() {
    console.log(this.dataProp)
  }
});

new Vue({
  el: '#root'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="root">
  <custom-component>
    <template scope="{parent_data}">
      hello
      <sub-component :data-prop="parent_data">
        <template scope="props">
          {{props.subData.length}} sub component hello
        </template>
      </sub-component>
    </template>
  </custom-component>
</div>

本质上，您将希望能够在子插槽中使用的数据作为插槽上的属性公开，

<slot :parent_data="parent_data"></slot>

然后你必须用 template 包含关键字 scope 的插槽中要使用的内容。

<template scope="props">
  {{props.subData.length}} sub component hello
</template>

模板的scope 属性中的表达式定义了您将如何访问子节点的数据。在上面的示例中，我使用了scope="props"，这意味着在插槽上传递的所有属性都可以作为props 的属性使用。您还可以在范围表达式中使用对象解构来获取您想要使用的属性，如scope="{parent_data}"。