Vue 插槽(slot)使用

Slot 通俗理解就是‘占坑’，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑(替换组件模板中slot位置)

并且可以作为承载分发内容的出口

内容插槽

定义两个组件 home.vue、test.vue

然后在home.vue组件中引用test.vue组件

插槽内可以包含普通文本

//home.vue
<test>
     Hello Word
</test>


//test.vue
<a href="#">
	 <slot></slot>
</a>

当组件渲染的时候，<slot></slot>会被替换为Hello Word

插槽内可以包含任何模板代码，包括HTML

在你的 index.html 引用 Font Awesome 图标的样式就直接可以用那里面的图标了

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css