作用域插槽理解

        早上5点下大雨了，迷迷糊糊起来收衣服，一不小心踩滑了，脑袋重重的摔在床上，嘤嘤嘤，瞬间蒙蔽到无法呼吸，大概是抬头45°仰望天空的时候姿势不对，总是感觉黑盒子里的知识洒了一些，白天笨笨的，晚上回家的时候好好找一下滴落的智慧。

        本篇讲一下作用域插槽的理解，本汪认为是子组件与父组件的数据动态交互的一种常见案例，二话不说先上代码：

html：

<div id="app" class="parent">
<child>
<template scope="a">
<span>hello from parent</span>
<span>{{ a.say }}</span>
</template>
</child>
</div>

父组件中必须要有template元素，且必须有scope特性，scope特性中是临时变量名，接收从子组件中传递上来的属性，属性可以是任意定义的。

js：

<script type="text/javascript">
Vue.component('child',{
template:'\
<div class="child">\
<slot say="hello from child"></slot>\
</div>'
});
new Vue({
el:"#app"
})
</script>

下面再上一个列表组建的demo，在这个demo中本汪特意打乱了属性的名字，为了明确数据之间的关系，（在阅读vue官方文档的时候给出的demo简洁漂亮，但是一本正经的变量命名容易让人迷惑），希望读者自行品读其中的数据关联关系，

：

html：

<div id="app">
<girl :favorite-a="items">
<template slot="cute" scope="variable"> <!-- /*作用域插槽也是可以具名的*/ -->
<li style="padding:8px 2px;">{{variable.thing}}</li><!-- scope变量调用的值必须和slot传出的值保持一致 -->
</template>

</girl>
</div>
<script>
Vue.component('girl',{
template:'\
<ul>\
<slot name="cute" \
v-for="dos in favoriteA" \
:thing = "dos.what" >\
</slot>\
</ul>\
',
props:['favorite-a']//数据是从外部传进来的 所以需要props动态接收
//父组件动态绑定的属性要和props中的属性的写法保持一致，但是在slot中计算时要还原成驼峰形式
})
new Vue({
el:"#app",
data:{
items:[
{what:'逛'},
{what:'吃'},
{what:'打扮'},
{what:'逛'},
{what:'吃'},
{what:'打扮'},
{what:'逛'},
{what:'吃'},
{what:'打扮'}
]
}
})
</script>

注释点已在代码中标出，就不再赘述啦哈哈哈，拜拜哒，放学咯。

哈哈哈 ，  打架吧狗子君。