SOURCE

 
Vue.component("a-link", {
    template: `<a href='#'><slot /></a>`
})

Vue.component("a-list", {
    template: `

        <div>

            <div class='link-wrapper' v-for="(slot, i) in $slots.default">
                {{slot.tag}}
                <!-- 下面的代码怎么写, 才能把每个a-link 包裹上一个 .link-wrapper ? -->
                <!-- <component :is="slot" /> -->
            </div>

             
        </div>
    
    `,
    created(){
        console.log(this.$slots.default)
    }
})


new Vue({
    el :"#app",
    template: `
       <div>
    
            <a-list>

                <a-link>111</a-link>
                <a-link>222</a-link>
                <a-link>333</a-link>

            </a-list>



            要变成类似下面的结构
            <div>
                <div class="link-wrapper">
                    <a href='#'>111</a>
                </div>

                <div class="link-wrapper">
                    <a href='#'>222</a>
                </div>


                <div class="link-wrapper">
                    <a href='#'>333</a>
                </div>
            </div>

        
        </div>

    
    `
}) 

<script src="https://libs.cdnjs.net/vue/2.6.9/vue.js"></script>

<div id="app">


 


</div>

.link-wrapper {

    background: red;
    margin: 10px;

}

.link-wrapper a {
    color: green;
}