vue2视频教程系列第三十三节—作用域插槽

vue2018-07-19.jpg

作用域插槽，乍看上去似乎很深奥的样子。其实如果把它的作用说出来，也就不难理解了。我们先回忆一下上一节课的内容，我们学习了slot插槽，分为单个插槽和多个插槽（通过有没有给slot属名，我也们也可以将它们分为匿名插槽和具名插槽）。他们的特点就是将父组件里的数据传递给子组件，让子组件显示父组件传递过来的数据。那有没有一种方式可以从子组件向父组件传递呢？答案是有的，就是我们今天的主角--作用域插槽。作用域插槽就是将子组件里绑定的数据传输给父组件。

有些小伙伴可能会说了，我在子组件里直接显示数据就可以了，为什么还要传来传去的？这是因为在有的项目里，可能多次调用同一个组件，用一套数据，但是显示的样式是不一样的。这时候，我们就将数据绑定在一个组件上，父组件不同位置调用或者不同父组件调用时，给予子组件的数据不同的样式就可以达到目的。我们看下实例。

我们在子组件About.vue里绑定一套数据：

data () {
return {
list: [
{
name: '小红',
scores: 80
},
{
name: '小明',
scores: 90
},
{
name: '小亮',
scores: 100
}
]
}

在slot上自定义一个属性，用于将这个数据捆绑在slot上

接下来回到父组件上：

1.首先要引入About.vue组件，并注册组件：

import About from './views/About.vue'
components: {
About
},

2.在DOM里使用About组件。需要说明一点的是，父组件里接收数据是用slot-scope，其等号后面自定义一个变量，注意最好不要与子组件里定义的属性一样。slot-scope需要写在template,写在其它标签上不管用。我们在App.vue里两次调用About.vue组件，两次样式不一样。我们可以这样写

在css里分别定义他们的class

.about1,.about1 li {
list-style: none;
}
.about1 li {
line-height: 40px;
border-bottom: 1px solid #999;
}
.about2 {
display: inline-block;
margin-right: 10px;
color: red
}
.about2:after {
content: '/';
padding-left: 10px;
}

我们在浏览器里会看到，虽然是一套数据，但显示是完全不一样的。这就是插槽作用域的作用。

单个插槽和具名插槽以及插槽作用域的区别：

单个插槽：只1个插槽，

具名插槽：多个插槽，以属名区分。

这两个是父组件提供样式，提供数据给子组件；插槽作用域则是子组件给父组件提供数据，父组件提供样式。

就到这里了，休息休息一会儿吧：）

欢迎关注微信公众号：duzhan99