关于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>
  <div slot="head">I am head</div>
  <div slot="foot">I am head</div>
  覆盖默认
</child>

Answer 2

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