Vue.component('my-list', {
  template: '#my-list',
  data() {
    return {
      title: 'Shapes',
      shapes: [ 
        { name: 'Square', sides: 4 }, 
        { name: 'Hexagon', sides: 6 }, 
        { name: 'Triangle', sides: 3 }
      ]
    };
  }
});

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

添加了一点CSS后，将会如下图所示:

泛化my-list

现在，我们想要使my-list功能足够多，以呈现任何类型的列表。第二个测试用例将是一个颜色列表，包括一个小样本来显示颜色。

为此，我们必须抽象特定于形状列表的任何数据。由于列表中的项的结构可能不同，我们将为my-list提供一个插槽，以便父列表可以定义任何特定列表的显示方式。

app.js

Vue.component('my-list', {
  template: '#my-list',
  props: [ 'title' ]
});

index.html

  
    {{ title }}
    
      
    
  

现在让我们在根实例中创建my-list组件的两个实例来显示我们的两个测试用例列表:

app.js

new Vue({
  el: '#app',
  data: {
    shapes: [ 
      { name: 'Square', sides: 4 }, 
      { name: 'Hexagon', sides: 6 }, 
      { name: 'Triangle', sides: 3 }
    ],
    colors: [
      { name: 'Yellow', hex: '#F4D03F', },
      { name: 'Green', hex: '#229954' },
      { name: 'Purple', hex: '#9B59B6' }
    ]
  }
});

  
    
      
{{ shape.name }} ({{ shape.sides }} sides)
    
  
  
    
      

        
        {{ color.name }}      
    
  

就像这样:

表面成分

我们刚刚创建的代码工作得很好，但是代码并不好。my-list是按名称显示列表的组件。但是我们已经抽象了所有将列表呈现到父列表中的逻辑。组件只是用一些表示标记将列表包装起来。

考虑到组件的两个声明中仍然有重复的代码(例如

  
    Hello from parent
    {{ props.my-prop }}
  

  Hello from parent
  Hello from child

现在我们得到my-list来迭代这些项。在v-for循环中，item是当前列表项的别名。我们可以创建一个槽，并使用v-bind="item"将该列表项绑定到槽。

app.js

Vue.component('my-list', {
  template: '#my-list',
  props: [ 'title', 'items' ]
});

index.html

  
    {{ title }}
    
      
        
      
    
  

注意:如果您以前没有见过v-bind在没有参数的情况下使用，这将把整个对象的属性绑定到元素。这对于作用域插槽非常有用，因为您绑定的对象通常具有任意属性，现在不需要通过名称指定这些属性。

现在我们将返回到根实例，并在my-list的slot中声明一个模板。首先查看形状列表，模板必须包含我们为其分配别名形状的scope属性。这个别名允许我们访问限定范围的道具。在模板内部，我们可以使用与以前完全相同的标记来显示形状列表项。

  
    
{{ shape.name }} ({{ shape.sides }} sides)
  

下面是完整的模板:

  
    
      
{{ shape.name }} ({{ shape.sides }} sides)
    
  
  
    
      

        
        {{ color.name }}
      
    
     

看完了这篇文章，相信你对“Vue.js中的作用域插槽是什么”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！