作用域插槽

使用规则：

• 子组件只是传递数据
• 父组件调用子组件，规定DOM

使用场景：

• 需要父组件定义DOM
• 需要父组件筛选数据

---

先定义子组件

Vue.component('child',{
    data:function(){
        return {
            list:['1','2','3']
        }
    }
    template:`
        <div>
            <slot v-for="item of list" :item='item'></slot>
        </div>
    `
});
var vm = new Vue({
    el:'#app'
});

需要注意template 里并没有写死 DOM 标签元素，需要父组件调用时写入标签元素。

---

父组件调用

<div id="app">
    <child>
        <template slot-scope='props'>
            <h1>{{props.item}} + 365</h1>
            
        </template>
            }
    </child>
</div>

子组件中把数据绑定在item ，父组件中定义作用域插槽slot-scope , 传入的数据成为其下面的一个属性，故可以在父组件中自由选择对数据的处理

例如：只显示基数项

<child>
    <template slot-scope='props'>
        <h1 v-if='props.item % 2'>{{props.item}}   +    bby</h1>
        
    </template>
</child>

当然，还可以根据需求做其他的数据处理。