Appearance
插槽内容
本节目标:理解“插槽内容”的核心思路,并能把它用于实际开发或面试表达。 ==一、即用两个组件标签之间的内容去替换组件模板中的==
\<slot\>\</slot\>==二、====如果组件模板中====没有====包含一个==\<slot\>==元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。== ==例如:==
<navigation-link url="/profile"> Your Profile</navigation-link>==然后你在== \<navigation-link\> ==的模板中可能会写为:==
<a v-bind:href="url" class="nav-link"> <slot></slot></a>==当组件渲染的时候,==\<slot\>\</slot\> ==将会被替换为“==Your Profile==”。==
==三、插槽内可以包含任何模板代码,如==HTML==、甚至其它的组件:==
<navigation-link url="/profile"> <!--==添加一个== Font Awesome ==图标==
--> <span class="fa fa-user"></span> Your Profile</navigation-link>
<navigation-link url="/profile"> <!--==添加一个图标的组件==
--> <font-awesome-icon name="user"></font-awesome-icon> Your Profile</navigation-link>