vue-插槽

1、插槽可以干什么？

　　使用插槽可以动态的预留内容

2、插槽有哪些？

　　默认插槽、具名插槽、作用域插槽；

3、如何使用？

　　以下是关键代码

　　默认插槽： <slot></slot>

具名插槽：<slot name="xxx"></slot>

 

　 作用域插槽：<template slot-scope="slotProps">

4、 具名插槽的使用：

　　实现步骤：首先创建一个子组件 /views/demo/soltcomponent.vue 在父组件中根据这个路径导入进来import basecomponent from '@/views/demo/soltcomponent.vue';

　　在父注册组件： components: { basecomponent } 使用组件：<basecomponent> </basecomponent>;通过 slot="header" 为这个header的插槽 添加内容；

具名插槽的方式，使用第二种更加方便

 

 <template>
    <div>
         
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>    
    </div>
  </template>

  <script>
    
    export default {
         
      data() {
        
        return {
             num:0 
        }
      },
     
    }
  </script>

<template>
<div id="createCard">
 

  <!-- 具名插槽第一中方式 这种标签的方式只能写一个元素 -->
<div  style="float:left;border:10px; 200px;">
  <basecomponent>
    <h1 slot="header">标题内容</h1>
    <p>内容一</p>
    <p>内容二</p>
    <p>内容三</p>
    <h2 slot="footer">我是底部</h2>
  </basecomponent>
</div>


<!-- 具名插槽第二中方式 可以写多个元素 -->
<div  style="float:right;border:1px;300px;">
   <p>具名插槽二</p>
   <basecomponent>
  
  <template slot="header">
      <p>header1</p>
      <p>header2</p>
  </template>
    <p>内容一</p>
    <p>内容二</p>

  <template slot="footer">
      <p>footer1</p>
      <p>footer2</p>
  </template>
 </basecomponent>

 

</div>
 
</div>
</template>
<script>
 
import   basecomponent   from '@/views/demo/soltcomponent.vue'; 
 

export default {
  name: "actionCreate",
    components: {
  
      basecomponent,
     
  },
  data() {
    return {
      list:[{
          id:1,
          name:'苹果'
          },{
            id:2,
            name:'橙子'
          },{
            id:3,
            name:'香蕉'
          }
      ],
      test: true,
      message:'自定义组件显示',
      context:'这是很长很长一段话',
      number:0,
    };
  },
  methods:{
      createTable(){
            
      }, 
      
      clickMy(numbers){
        this.number+=numbers;
        //alert(this.number++);
      }
  }
};
</script>
<style>
.current{
  color: aquamarine;
}
</style>

5、作用域插槽

 <template>
    <div>
    <li :key="item.id" v-for="item in list">
        <slot :info="item">{{item.name}}</slot>
    </li>      
    </div>
  </template>

  <script>
    export default {
        props:['list'],
        data() {
        return { 
        }
      } 
    }
  </script>

<template>
<div>
<!-- 作用域插槽  slot-scope获取子组件的内容-->
 <soltScope :list="list">
    <template slot-scope="slotProps">
      <strong v-if="slotProps.info.id==2" class="current">{{slotProps.info.name}}</strong>
      <span v-else>{{slotProps.info.name}}</span>
    </template>
 </soltScope>

</div>
 
 
</template>
<script>
 
import   soltScope   from '@/views/demo/soltScope.vue'; 

export default {
  name: "actionCreate",
    components: {
      soltScope,
  },
  data() {
    return {
      list:[{
          id:1,
          name:'苹果'
          },{
            id:2,
            name:'橙子'
          },{
            id:3,
            name:'香蕉'
          }
      ],
      test: true,
      message:'自定义组件显示',
      context:'这是很长很长一段话',
      number:0,
    };
  },
  methods:{
      createTable(){
            
      }, 
      
      clickMy(numbers){
        this.number+=numbers;
        //alert(this.number++);
      }
  }
};
</script>
<style>
.current{
  color: aquamarine;
}
</style>