一学就会的Vue slot插槽,真的不看看吗?(使用脚手架)

Posted 小余努力搬砖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一学就会的Vue slot插槽,真的不看看吗?(使用脚手架)相关的知识,希望对你有一定的参考价值。

目录

一、前言

完整内容请关注:

开始前的准备:

 二、slot插槽的基本使用

子组件:

父组件:

展示效果:

三、域名插槽的基本使用

子组件:

父组件:

效果展示:

注意:

四、如何通过slot从子组件获取内容

子组件

父组件

效果展示:

五、作用域插槽案例

子组件

父组件

效果展示:


一、前言

完整内容请关注:

https://blog.csdn.net/yzq0820/category_11934130.html?spm=1001.2014.3001.5482https://blog.csdn.net/yzq0820/category_11934130.html?spm=1001.2014.3001.5482

开始前的准备:

首先创建两个子组件,soltOne是基础使用,soltTwo是域名插槽使用,soltThree是演示父组件获取子组件内容,图片后的代码一定要注意,容易出现很多细节上的小问题。

import SoltOne from './components/soltOne.vue'
import SoltThree from './components/soltThree.vue'
import SoltTwo from './components/soltTwo.vue'
export default 
    name: 'app',
  components: 
    SoltOne,
    SoltTwo,
    SoltThree

  ,
 

 二、slot插槽的基本使用

子组件:

在子组件中使用 <slot></slot>给值留下位置,可以得到父组件的值

<template>
<div>
    <strong>ERROR:</strong>
    <slot></slot>
</div>    
</template>

<script>
export default 
   name:'soltOne' 

</script>

<style>

</style>

父组件:

 <solt-one>有Bug发生</solt-one>

展示效果:

 以上就是插槽的最基本的使用

三、域名插槽的基本使用

子组件:

这里,我简单的划分了三个区域,一个头部,内容,尾部

头部和尾部 <slot></slot>都给上了name:‘’让其获得域名

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

<script>
export default 
    name:'soltTwo'

</script>

<style>

</style>

父组件:

在此内容下,p标签内只要对应子组件起的name名,就能把值赋值到想要的地方,没有name名的将会赋值到,子组件中没有name名的位置。

<solt-two>
  <p slot="header">头部信息</p>
  <p>主要内容1</p>
  <p>主要内容2</p>
  <p slot="footer">尾部信息</p>
</solt-two>

效果展示:

父组件还有一种,可以通过域名来实现插槽,使用v-slot:来获取子组件的域名,从而指定赋值,其中也可以添加多条内容,比上一种方法更完善。

<solt-two>
  <template v-slot:header>
     <p>头部信息1</p>
     <p>头部信息2</p>
  </template>
  <p>主要内容1</p>
  <p>主要内容2</p>
   <template v-slot:footer>
     <p>尾部信息1</p>
     <p>尾部信息2</p>
  </template>
</solt-two>

注意:

这里的顺序是根据子组件的顺序排列,父组件跟换域名位置,还是按照子组件的域名排序出现

内容会跟着父组件发生改变

<solt-two>
  <template v-slot:footer>
     <p>头部信息1</p>
     <p>头部信息2</p>
  </template>
  <p>主要内容1</p>
  <p>主要内容2</p>
   <template v-slot:header>
     <p>尾部信息1</p>
     <p>尾部信息2</p>
  </template>
</solt-two>

四、如何通过slot从子组件获取内容

子组件

这里需要注意的是,要将子组件的值进行v-bind绑定

<template>
   <div>
    <slot :son="list">
    
    </slot>
   </div> 
</template>

<script>
export default 
    name:'soltThree',
     data()
    return
      list:[1,2,3,4,5,6,7,8,9]
    
  

</script>

<style>

</style>

父组件

一下提供了四种,子组件的值可以使用v-for遍历,这里的list1是自己新起的名字,son是子组件绑定的,slot-scope这种方法逐步出现了淘汰, #default这种方法比较推荐,看起来就很简单好记

  <solt-three>
  <template v-slot="list1">
      <div>list1.son</div>
  </template>
  </solt-three>

  <solt-three>
  <template v-slot:default="list1">
      <div>list1.son</div>
  </template>
  </solt-three>

  <solt-three>
  <template #default="list1">
  <ul>
      <li v-for="(item,index) in list1.son" :key="index">item</li>
  </ul>    
  </template>
  </solt-three>

<solt-three>
  <template slot-scope="list1">
      <div>list1.son</div>
  </template>
  </solt-three>

效果展示:

五、作用域插槽案例

 父组件替换插槽的标签,但是内容是由子组件来提供。

​ 当组件需要在多个父组件多个界面展示的时候,将内容放在子组件插槽中,父组件只需要告诉子组件使用什么方式展示界面。

子组件

<template >

  <div>
      <slot :data="pLanguage">
          <ul>
              <li v-for="(item, index) in pLanguage" :key="index">item</li>
            </ul>
      </slot>

    </div>  
</template>

<script>
export default 
   name:'oneText' ,
      data() 
        return 
          pLanguage:['javascript','Java','C++','C']
        
      ,
    

</script>

<style>

</style>

父组件

 

<one-text></one-text>

    <one-text>
      <template #default="slot">
      <span>slot.data.join(' - ')</span>
      </template>
    </one-text>
    <one-text>
        <template #default="slot">
        <p><span v-for="(item, index) in slot.data" :key="index">item</span></p>   
        <span>slot.data.join(' * ')</span>
        </template>
    </one-text>

效果展示:

以上是关于一学就会的Vue slot插槽,真的不看看吗?(使用脚手架)的主要内容,如果未能解决你的问题,请参考以下文章

一学就会的便签整理法 帮你轻松收集灵感

png图片怎么转换成jpg?一学就会的格式转换方法,快来看看!

满天星空小游戏—小白一学就会的python游戏开发实战源码+教程

Jetpack Compose : 一学就会的自定义下拉刷新&加载更多

Jetpack Compose : 一学就会的自定义下拉刷新&加载更多

一学就会的顺序表 —— 结构及各种接口 ( 头插 / 删尾插 / 删特定位置查找 / 插入 / 删除 ) 的实现