vue中的slot用法

Posted 2020-12-18 davina123

　　slot: 插槽。它是组件的一块html模板，这块模板显示不显示以及怎样显示是由父组件来决定的。它用于决定将所携带的内容，插入到指定的某个位置，从而使用模板分块。具有模块化的特性。

　　slot可以看成是一个空盒子，它显示与隐藏，用什么样的html模板都是由父组件来控制的，它自己本身不能决定，他显示的位置是由子组件自身来决定的。就自己的理解，我们可以通过slot向子组件的内部指定位置传递内容，它可以在子组件中占好位置，当使用这个组件时，组件标签里面的内容就会通过父组件里的设置进行填充。

　　匿名slot: 当子组件模板只有一个没有属性的slot时，父组件整个内容片断将插入到slot所在的DOM位置，并且替换slot标签。它可以放在子组件的任意位置。

<template>
   <div>
       <h2>父组件</h2>
    <myslot>
        <!-- 在组件中插入p标签和其内容 -->
        <i>这里我插入了内容</i> 
    </myslot>
   </div>
</template>
<script>
//引入
import slot from "./mySlot.vue";
export default {
  name: "xxx",
  data() {
    return {};
  },
  components: {
    myslot
  }
};
</script>
<style lang=‘less‘>
</style>
-----------------------------------
<template>
   <div>
       <h2>子组件</h2>
       <!-- 当父组件中有替代的内容就把slot替换
            没有的话就默认使用slot中的内容替换slot
        -->
       <slot>
           <p>父组件中没有插入内容时，我就是默认内容</p>
       </slot>

   </div>
</template>

　　具名slot: <slot>元素它可以用一个特殊的属性name来配置如何分发内容，多个slot可以有不同的名字。具名slot将匹配内容片段中有对应slot特性的元素。

　　在具名slot中，还是可以有一个匿名slot的，它是默认的slot，作为找不到匹配的内容的备用插槽。匿名slot只能它只能是没有slot属性的元素的插槽，有slot属性的元素如果没有配置slot则会被抛弃。

　　如果子组件中又有具名slot还有匿名slot，父组件中的所有不带slot属性的htlml标签会被当成一个整体，替换子组件中的slot标签。

<template>
   <div>
       <h2>父组件</h2>
       <myslot>
           <!-- 这个p会替换子组件中name为first的slot标签 -->
           <p slot=‘fisrt‘>匹配第一个slot的内容</p>
           <!-- 这个p会替换子组件中name为last的slot标签 -->
           <p slot=‘last‘>匹配最后一个slot内容</p>
           <!-- 它会替换子组件中没有name的slot标签 -->
           <p>其它内容</p>
       </myslot>
   </div>
</template>
----------------------------------------------------------------
<template>
   <div>
      <h2>子组件</h2>
      <slot name="first">first</slot>
      <slot name="last">last</slot>
      <slot></slot>
      <slot>默认值</slot>
   </div>
</template>

　　或者是可以用v-slot来进行操作。v-slot:插槽名等同于<标签名 slot="插槽名">,但是它只能用在template上。v-slot可以简写成#。

<template>
   <div>
       <h2>父组件</h2>
       <myslot>
          <template v-slot:first>
            <p>first</p>
          </template>
       </myslot>
   </div>
</template>
---------------------------------
<template>
   <div>
       <h2>子组件</h2>
       <myslot>
         <slot name=‘first‘></slot>
       </myslot>
   </div>
</template>

　　作用域插槽：它是一种特殊类型的带数据的插槽。使用一个数据可重用模板替换已渲染好的元素。需要注意是的新版本的写法。

　　　　　　　　slot-scope=‘用户自己起的名字‘，这个名字对应的值是子组件(<slot:自定义属性=‘xxx’</slot>)中的在slot上所有行内属性组成的对象。

<template>
   <div>
     <h2>父组件</h2>
      <child :list=‘ary‘>
        <!-- <h1 slot-scope="aaa">{{aaa}}</h1> -->
        <!-- 老版本写法 -->
        <!-- <h1 slot-scope="aaa">{{aaa.www}}</h1> -->
        <!-- 新版本写法 -->
        <template #default=‘aaa‘>
          <h1>{{aaa.www}}</h1>
        </template>
      </child>
   </div>
</template>
<script>
import childApp from ‘./childApp‘
export default{
   name: ‘App‘,
   data(){
       return {
       ary:[1,2,3,4,5,6,7]
       }
   },
   components:{
     "child":childApp  
   }
}
</script>
<style lang=‘less‘>
</style>

<template>
  <div>
    <h2>子组件</h2>
    <ul>
      <li v-for="i in list" :key="i">
        <slot :www="i"></slot>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "childApp",
  //用props接收父组件传过来的值
  props: ["list"],
  data() {
    return {};
  },
  components: {}
};
</script>
<style lang=‘less‘>
</style>