Vue中slot使用解析之具名插槽与作用域插槽

本篇文章给大家带来了关于vue的相关知识，其中主要介绍了关于具名插槽与作用域插槽的使用相关问题，插槽就是子组件中的提供给父组件使用的一个占位符，插槽包括默认插槽、具名插槽和作用域插槽，下面一起来看一下，希望对大家有帮助。

【相关推荐：vue、vue】

一、什么是插槽

1、插槽就是子组件中的提供给父组件使用的一个占位符，在子组件中用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。（简单来说就是在子组件中挖个坑让别人来跳）

2、在 2.6.0 版本之后，slot 以及 slot-scope 由 v-slot 统一替代。

立即学习“前端免费学习笔记（深入）”；

3、插槽包括默认插槽、具名插槽和作用域插槽

二、前期准备

1、通过vue-cli创建好初始化项目2、src下创建category.vue，同时在App.vue中引入

登录后复制

三、具名插槽的使用

1.子组件配置slot

在子组件中配置好props，接收从父组件App传来的信息以及准备两个slot插槽：

//category.vue  
    
{{ title }}
    //准备两个带有不同name的插槽（可以让使用者在指定的地方显示数据）    默认插槽1    默认插槽2  
export default {  name: "category",  data() {    return {};  },  props: ["title", "listData"],};#bck {  background-color: skyblue;  width: 200px;  height: 300px;}h3 {  text-align: center;  background-color: #bfa;}

登录后复制

2.使用者App.vue配置数据

通过在子组件category定义的不同的name，可以让数据在指定的位置显示：

//App.vue  
          @@##@@      更多              
        
{{ g }}
      
      
        单机游戏        网络游戏      
                    
        更多信息1        更多信息2      
      
import category from "./components/category";export default {  name: "app",  data() {    return {      foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"],      game: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"],    };  },  mounted() {},  methods: {},  components: {    category,  },};#app,#game {  display: flex;  justify-content: space-around;}img {  width: 100%;}video {  width: 100%;}

登录后复制

3.结果展示

4.具名插槽总结

1、在定义好slot插槽后，在需要展示的标签中加上 slot=“name”，即可在指定的位置上显示需要显示的内容

2、同时需要注意的是，此方法的插槽数据源game是在App父组件中提供的，而不在子组件自身提供。为了减少冗余，可通过作用域插槽将数据存储在定义slot插槽的组件自身

四、作用域插槽的使用

要求将要展示的数据放在定义插槽的组价中

父组件App.vue仅仅只是根据数据生成结构，而数据是在定义slot的组件中提供的

1.子组件配置slot

在子组件中配置的props仅需要接收标题头。准备两个作用域插槽并携带要展示的数据：

//category.vue  
    
{{ title }}
    作用域插槽  
export default {  name: "category",  data() {    return {      foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"],      games: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"],    };  },  props: ["title"],};#bck {  background-color: skyblue;  width: 200px;  height: 300px;}h3 {  text-align: center;  background-color: #bfa;}

登录后复制

2.使用者接收数据并设置结构

//App.vue                        

• {{ g }}

1. {{f}}

登录后复制

3.结果展示

4.作用域插槽总结

1、可以解决在使用者组件中没有要展示的数据，要调用别的组件的数据时可以使用。

2、定义slot的组件将自身的数据传给使用者，使用者接收到数据后进行结构的配置。

3、使用者仅决定生成的结构样式，而数据是从被使用者（定义slot的组件）传来的。

4、可以理解为slot就是父组件向子组件的指定位置插入特定的结构。

【相关推荐：vue、vue】

以上就是Vue中slot使用解析之具名插槽与作用域插槽的详细内容，更多请关注【创想鸟】其它相关文章！