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资源定义的，尽管它似乎与此无关。

你会看到我们在浏览器中输出“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

如果您想引用插槽内儿童的数据，则需要使用scoped slots。

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

＆＃13;

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'
});

＆＃13;

<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>

＆＃13;

基本上，您将要在子广告位中使用的数据公开为广告位上的属性，

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

然后您必须使用包含关键字template的{{1}}将要在插槽中使用的内容包装起来。

scope

模板的<template scope="props"> {{props.subData.length}} sub component hello </template>属性中的表达式定义了如何从子级访问数据。在上面的示例中，我使用了scope，这意味着在插槽上传递的所有属性都将作为scope="props"的属性提供。您还可以在范围表达式中使用对象解构来获取要使用的属性，如props中所示。

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

1 个答案: