组件作用域
- 1.就是父组件与子组件各在data中定义一个相同的字段flag；
- 2.在VM数据时，只会访问各自的data，这就是作用域；
作用域插槽
两句话概括：
1.父组件替换插槽的标签，但是内容由子组件来提供；
2.插槽不仅可以让标签作为共同性，也可以让数据作为共同性传递出去；
用需求来进一步指明slot作用域插槽
1.子组件中包括一组数据，比如：planguage:['js',’python‘,'c++','java']
2.需要再多个界面进行展示：
a.某些界面是以水平方向-展示的；
b.某些界面是以列表形式展示的；
c.某些界面是直接展示一个数据；
3.内容在子组件，希望父组件告诉我们如何展示？利用slot作用域插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<chilrderhtml></chilrderhtml>
<chilrderhtml>
<!--目的是获取子组件中的数组-->
<!--vue2.5以下要想使用子组件的数组，必须使用template标签-->
<template slot-scope="slot">
<span v-for="item in slot.data">{{item}}</span>
</template>
</chilrderhtml>
</div>
<template id="chilrderhtml">
<div>
<!--data这个是自定义，随便取的-->
<slot :data="planguages">
<ul>
<li v-for="item in planguages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: '#app',
data: {
message: '你好啊'
},
components: {
chilrderhtml: {
template: '#chilrderhtml',
data() {
return {
planguages: ['js', 'python', 'c++', 'java']
}
}
}
}
});
</script>
</body>
</html> ![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)