Vue 插槽

基础插槽and具名

        <!-- 普通 -->
        <vm>你好</vm>
        <!-- 具名插槽 -->
        <vm>
            <template v-slot:input>
                vue
            </template>
        </vm>

Vue.component("vm", {
    template: `
    <div>
    <input type="text"><span><slot>默认</slot></span>
    <input type="text"><span><slot name="input">默认</slot></span>
    </div>
    `
})

##作用域插槽

  <div id="fruit">
            <fruit-list :list='list'>
                <template v-slot:default="slotProps">
                    <strong v-if='slotProps.item.id == 3'>{{slotProps.item.name}}</strong>
                    <span v-else>{{slotProps.item.name}}</span>
                </template>
            </fruit-list>
        </div>

Vue.component("fruit-list", {
    props: ['list'],
    data: function () {
        return { listData: this.list }
    },
    template: `<div>
    <li v-for = 'item in listData' :key = 'item.id'>
    <slot v-bind:item='item'></slot> //通过bind把数据绑定在slot
    </li>
    </div>`
})
new Vue( {
    el:"#fruit",
    data:  function(){
        return {list:[{ id: 1, name: "苹果" },
            { id: 2, name: "橘子" },
            { id: 3, name: "西瓜" }]}
    }
})

v-slot:default="slotProps" 

为slot所有参数对象，slotProps为名字可自定义，通过slotProps就可以访问子组件的slot数据