Hey,吃完饭多陪陪家人吧！

Vue.js组件component的slot分发内容

发布于2018-6-7 分类：JS / Vue.js / 前端 评论(0) 阅读(2,074)
　　　

在使用Vue的组件时，如果父组件里事有内容的，默认情况下渲染是会将父组件的内容直接覆盖的。

一、默认情况下，父组件内容被覆盖

看下面这个例子：

  1. <!--Vue组件默认会覆盖渲染-->
  2. <div id="appDefault">
  3.   <h1>一、111渲染时被覆盖</h1>
  4.   <default>
  5.     <h5>111</h5>
  6.   </default>
  7. </div>
  8. Vue.component("default",{
  9.   //一个template只能处理一个div，所以template必须包含一个根节点(如果需要多于一个，可用v-if语句)，否则报错“Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.”
  10.   template:`
  11.         <div>
  12.             <h5>222</h5>
  13.             <h5>333</h5>
  14.         </div>
  15.     `
  16. });
  17. var vm1 = new Vue({
  18.   el:"#appDefault"
  19. });

运行结果：

父组件默认的内容“111”在渲染的时候被子组件“default”覆盖掉了。

二、使用slot分发内容，保留父组件原有内容

在组件component的template模板下插入“<slot></slot>”即代表父组件原有的内容，使该内容在渲染时得以保留。

  1. <!--使用slot分发内容，保留原有HTML-->
  2. <div id="slotApp">
  3.   <h1>二、slot分发内容</h1>
  4.   <slot-component>
  5.     <h5>111</h5>
  6.   </slot-component>
  7. </div>
  8. //slot
  9. Vue.component("slot-component",{
  10.   //可根据实际情况调整slot的位置
  11.   template:`
  12.         <div>
  13.             <h5>222</h5>
  14.             <slot></slot> 
  15.             <h5>333</h5>
  16.         </div>
  17.     `
  18. });
  19. var vm2 = new Vue({
  20.   el:"#slotApp"
  21. });

运行结果：

如上图，父组件的“111”没有被覆盖。

三、具名slot分发

具名slot，给需要放到特定位置的子元素一个slot="名称"的属性，在component模板对应位置添加<slot name="名称"></slot>。其它没有slot属性的子元素统一放到默认slot里。

  1. <!--具名slot分发-->
  2. <div id="slotApp2">
  3.   <h1>三、slot具名分发</h1>
  4.   <slot2>
  5.     <!--子元素增加一个 slot属性-->
  6.     <h5 slot="first">111</h5>
  7.     <h5 slot="second">222</h5>
  8.     <h5>333</h5>
  9.     <h5>444</h5>
  10.     <h5 slot="five">555</h5>
  11.   </slot2>
  12. </div>
  13. Vue.component("slot2",{
  14.   template:`
  15.         <div>
  16.              <!--没有给slot属性的子元素都放到这个默认的slot里面-->
  17.             <slot></slot>
  18.             <h5>666</h5>
  19.             <!--对应HTML中slot=“second”的子元素-->
  20.             <slot name="second"></slot>
  21.             <slot name="first"></slot>
  22.             <slot name="five"></slot>
  23.         </div>
  24.     `
  25. });
  26. var vm3 = new Vue({
  27.   el:"#slotApp2"
  28. });

运行效果：

本文代码在线预览

未经允许不得转载：Rising Sun's Blog » JS / Vue.js / 前端 » Vue.js组件component的slot分发内容
标签：
评论 0
 
 
发表评论