Skip to content

Instantly share code, notes, and snippets.

@ahuigo
Last active August 2, 2018 11:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ahuigo/635f1a6996e19fa83641929231f4eed8 to your computer and use it in GitHub Desktop.
Save ahuigo/635f1a6996e19fa83641929231f4eed8 to your computer and use it in GitHub Desktop.
Vue slot
<div id="parent-template">
<h1>我才是boss</h1>
<child>
<p>>原始头</p>
<p slot="head">我是头</p>
<p slot="foot">我是尾</p>
<p slot="xx">我没用</p>
<p>>原始尾</p>
</child>
</div>
<template id="main-template">
<div>
<slot name="head">头部占位</slot>
<div>
<p>原始内容(无slot):</p>
<slot>原始内容占位</slot>
</div>
<slot name="foot">尾部占位</slot>
</div>
</template>
new Vue({
el: "#parent-template",
components:{
'child':{template: `#main-template`}
},
data:{
list:['a','b'],
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment