作用域插槽主要作用是可以替换掉组件中的样式标签，自己定义新的样式，标签
- 第一步在组件中绑定一个属性，将需要传递的数据进行绑定
- 第二步在调用组件的时候通过slot-scope=“”来绑定数据
- 第三部可以进行使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn>
<!-- 通过slot-scope获取子组件的数据 -->
<template slot-scope="data">
<span v-for="item in data.data">{{item}}</span>
</template>
</cpn>
<cpn>
<template slot-scope="slot">
<span>{{slot.data.join(' - ')}}</span>
</template>
</cpn>
</div>
<script src="../vue.js"></script>
<template id="cpn">
<div>
<!-- 子组件通过绑定数据，可以最后传递到父组件中的slot中-->
<slot :data="pLanguage">
<ul>
<li v-for="item in pLanguage">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
},
components: {
cpn: {
template: '#cpn',
data() {
return{pLanguage: ['java','Python','javascript','Go']}
}
}
}
})
</script>
</body>
</html>