作用域插槽理解

        早上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>

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

哈哈哈 ，  打架吧狗子君。