!
也想出现在这里? 联系我们
广告区块

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

目录

一、前言

完整内容请关注:

开始前的准备:

二、slot插槽的基本使用

子组件:

父组件:

展示效果:

三、域名插槽的基本使用

子组件:

父组件:

效果展示:

注意:

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

子组件

父组件

效果展示:

五、作用域插槽案例

子组件

父组件

效果展示:


一、前言

完整内容请关注:

https://blog.csdn.net/yzq0820/category_11934130.html?spm=1001.2014.3001.5482一学就会的Vue slot插槽,真的不看看吗?(使用脚手架)https://blog.csdn.net/yzq0820/category_11934130.html?spm=1001.2014.3001.5482

开始前的准备:

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

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

  1. import SoltOne from './components/soltOne.vue'
  2. import SoltThree from './components/soltThree.vue'
  3. import SoltTwo from './components/soltTwo.vue'
  4. export default {
  5. name: 'app',
  6. components: {
  7. SoltOne,
  8. SoltTwo,
  9. SoltThree
  10. },

二、slot插槽的基本使用

子组件:

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

  1. div>
  2. strong>ERROR:strong>
  3. slot>slot>
  4. div>
  5. script>
  6. export default {
  7. name:'soltOne'
  8. }
  9. script>
  10. style>
  11. style>

父组件:

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

展示效果:

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

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

三、域名插槽的基本使用

子组件:

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

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

  1. div>
  2. header>
  3. slot name="header">slot>
  4. header>
  5. main>
  6. slot>slot>
  7. main>
  8. footer>
  9. slot name="footer">slot>
  10. footer>
  11. div>
  12. script>
  13. export default {
  14. name:'soltTwo'
  15. }
  16. script>
  17. style>
  18. style>

父组件:

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

  1. p slot="header">头部信息p>
  2. p>主要内容1p>
  3. p>主要内容2p>
  4. p slot="footer">尾部信息p>

效果展示:

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

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

  1. solt-two>
  2. template v-slot:header>
  3. p>头部信息1p>
  4. p>头部信息2p>
  5. template>
  6. p>主要内容1p>
  7. p>主要内容2p>
  8. template v-slot:footer>
  9. p>尾部信息1p>
  10. p>尾部信息2p>
  11. template>
  12. solt-two>

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

注意:

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

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

  1. solt-two>
  2. template v-slot:footer>
  3. p>头部信息1p>
  4. p>头部信息2p>
  5. template>
  6. p>主要内容1p>
  7. p>主要内容2p>
  8. template v-slot:header>
  9. p>尾部信息1p>
  10. p>尾部信息2p>
  11. template>
  12. solt-two>

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

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

子组件

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

  1. div>
  2. slot :son="list">
  3. slot>
  4. div>
  5. script>
  6. export default {
  7. name:'soltThree',
  8. data(){
  9. return{
  10. list:[1,2,3,4,5,6,7,8,9]
  11. }
  12. }
  13. }
  14. script>
  15. style>
  16. style>

父组件

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

  1. template v-slot="list1">
  2. div>{{list1.son}}div>
  3. template>
  4. solt-three>
  5. template v-slot:default="list1">
  6. div>{{list1.son}}div>
  7. template>
  8. solt-three>
  9. solt-three>
  10. template #default="list1">
  11. ul>
  12. li v-for="(item,index) in list1.son" :key="index">{{item}}li>
  13. ul>
  14. template>
  15. solt-three>
  16. solt-three>
  17. template slot-scope="list1">
  18. div>{{list1.son}}div>
  19. template>
  20. solt-three>

效果展示:

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

五、作用域插槽案例

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

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

子组件

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

  1. template >
  2. div>
  3. slot :data="pLanguage">
  4. ul>
  5. li v-for="(item, index) in pLanguage" :key="index">{{item}}li>
  6. ul>
  7. slot>
  8. div>
  9. template>
  10. script>
  11. export default {
  12. name:'oneText' ,
  13. data() {
  14. return {
  15. pLanguage:['JavaScript','Java','C++','C']
  16. }
  17. },
  18. }
  19. script>
  20. style>
  21. style>

父组件

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

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

  1. one-text>
  2. template #default="slot">
  3. span>{{slot.data.join(' - ')}}span>
  4. template>
  5. one-text>
  6. one-text>
  7. template #default="slot">
  8. p>span v-for="(item, index) in slot.data" :key="index">{{item}}span>p>
  9. span>{{slot.data.join(' * ')}}span>
  10. template>
  11. one-text>

效果展示:

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yzq0820/article/details/126291140
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索