Vue：插槽属性prop的使用示例

插槽属性prop的使用示例

文档：https://cn.vuejs.org/v2/guide/components-slots.html

子组件

  
    
      {{item.name}}
    
  



export default {
  name: 'Child',

  props: {
    list: { type: Array },
  },
};

父组件

  
    
    

    
    
      
        {{item.name}}-{{item.age}}
      
    

    
    
      {{age}}
    
  



import Child from './Child.vue';

export default {
  name: 'App',

  components: { Child },

  data() {
    return {
      list: [
        { name: 'Tom', age: 23 },
        { name: 'Jack', age: 24 },
        { name: 'Steve', age: 25 },
      ],
    };
  },
};

显示效果

TomJackSteve
Tom-23 Jack-24 Steve-25
232425