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

Posted 2023-02-23

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

【英文标题】：Anyway to use data properties in text passed to slot?

【发布时间】：2018-01-11 20:46:31

【问题描述】：

我是 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.lengthsub 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>

提前致谢！

【参考方案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"。