关于vue插槽问题

Question

div id="app">

    <child slot='head'>

        <!-- <p>miqi</p> -->

        i am head

    </child>

    <child slot='foot'>

        i am foot

    </child>

</div>

<script src="./vue.js"></script>

<script>

    Vue.component('child',{

        props: ['content'],

        template: `<div>

                    <slot name='head'></slot>

                    <p>hellow</p>

                    <slot>默认内容</slot>

                    <slot name='foot'></slot>

                    </div>`

    })

    var vm = new Vue({

        el: '#app'

    })

</script>

为什么<p>hellow</p> 会执行两次

Answer 1

照你的写法 出现两边才是对的啊，你想要的用法是这样的：<child> &nbsp;&nbsp;<div&nbsp;slot="head">I&nbsp;am&nbsp;head</div> &nbsp;&nbsp;<div&nbsp;slot="foot">I&nbsp;am&nbsp;head</div> &nbsp;&nbsp;覆盖默认 </child>

Answer 2

因为上面有两个 child 组件，每个 child 里面都有一个 <p>hello</p> 元素。你可以用 vue devtools 查看下