元件作用域
- 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=)