关于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 组件，每个 child 里面都有一个 <p>hello</p> 元素。你可以用 vue devtools 查看下

Answer 2

照你的写法 出现两边才是对的啊，你想要的用法是这样的：

<child>
  <div slot="head">I am head</div>
  <div slot="foot">I am head</div>
  覆盖默认
</child>