Skip to content

插槽内容 ​

本节目标:理解“插槽内容”的核心思路,并能把它用于实际开发或面试表达。 ==一、即用两个组件标签之间的内容去替换组件模板中的==\<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>

本站总访问 — 次