鍍金池/ 問(wèn)答/HTML/ 關(guān)于vue插槽問(wèn)題

關(guān)于vue插槽問(wèn)題

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>默認(rèn)內(nèi)容</slot>
                    <slot name='foot'></slot>
                    </div>`
    })
    var vm = new Vue({
        el: '#app'
    })
</script>
為什么<p>hellow</p> 會(huì)執(zhí)行兩次
回答
編輯回答
別傷我

因?yàn)樯厦嬗袃蓚€(gè) child 組件，每個(gè) child 里面都有一個(gè) <p>hello</p> 元素。你可以用 vue devtools 查看下

clipboard.png

2018年3月7日 16:27
編輯回答
醉淸風(fēng)

照你的寫(xiě)法 出現(xiàn)兩邊才是對(duì)的啊，你想要的用法是這樣的：

<child>
  <div slot="head">I am head</div>
  <div slot="foot">I am head</div>
  覆蓋默認(rèn)
</child>
2017年12月14日 13:00