(尚硅谷)Vue笔记-------19

默认插槽

 

 

这是我们利用之前学过的知识做的案例，现在我们需要来改个需求了，就是说我们的美食和电影部分我们不要去做这种了，我们只显示一个图片。

 

 

虽然这么改也是可以成功的，但是我们如果还想改电影，还有重复这段代码，并且如果业务逻辑不同，这么写也是会比较麻烦的。

这就需要使用我们的默认插槽:

 

 

 

 

具名插槽 

我们再新学一个插槽的形式：

 

 

这样我们可以想让哪个内容放到哪个插槽都可以。

 

 

作用域插槽

这部分我们就去简化代码了：

 

 

 然后我们在这个基础上去做作用域插槽。

我们复制粘贴组件在app.vue的部分，变成三个游戏分类：

我们的app是组件的使用者，并且也去给组件赋值。

我们现在把data从app上去除写到组件上。

 

 

我们按如上对代码进行了一些改动。

 

我们的页面效果没有发生变化，我们没有使用插槽。

我们现在想做的需求是让第一个分类的内容显示的是无序列表形式。

让第二个分类我们想让它是一个有序列表形式。第三个分类想让它变成一个都是h4的标题的形式。

不同的分类是不同的效果，我们是想要怎么做呢？

 

 

我们这么改之后，页面会报一个错误：

 

它说games没有被定义。这是因为我们的games的数据在组件中，但是我们却想在app中去调用它的值，不在一个作用域里了，无法对数值进行操作，这就引出了我们的作用域插槽。

我们要想办法把组件中的信息传到app中，vue的插槽给我们提供了这个方法:

 

我们可以用这种方式去反过来获取值。

 

如果某些场景，data的数据不在我们的app里，我们还想使用，就可以使用这种方法。

 总结：

 

 

 

Vuex简介 

求和案例 纯vue版