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

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子组件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

如果要引用插槽内的子数据，则需要使用作用域槽。

下面是最后一个更新以使用作用域槽的示例。

​

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}"中的那样。