Vue中作用域插槽配合ElementUI表单的使用

 一：作用域插槽的基本使用

1.什么是作用域插槽
作用域插槽就是带数据的插槽, 就是让父组件在填充子组件插槽内容时也能使用子组件的数据

2.如何使用作用域插槽
2.1在slot中通过 v-bind:数据名称="数据名称" 方式暴露数据
2.2在父组件中通过 <template slot-scope="作用域名称"> 接收数据
2.3在父组件的<template></template>中通过 作用域名称.数据名称 方式使用数据

<!--这里就是MVVM中的View-->
<div id="app">
    <father></father>
</div>
<template id="father">
    <div>
        <son>
<!--            <div>我是填充的内容 {{names}}</div>-->
            <!--
            slot-scope="abc"作用: 接收子组件插槽暴露的数据
            -->
            <!--
            作用域插槽的应用场景: 子组件提供数据, 父组件决定如何渲染
            -->
            <template slot-scope="abc">

<!--                <div>我是填充的内容 {{abc.names}}</div>-->
                <li v-for="(name, index) in abc.names">{{abc}}  <br/>  {{name}}</li>
            </template>
        </son>
    </div>
</template>
<template id="son">
    <div>
        <div>我是头部 {{names}}</div>
        <!--
        v-bind:names="names"作用: 将当前子组件的names数据暴露给父组件
        -->
        <slot v-bind:names="names">我是默认内容 {{names}}</slot>
        <div>我是底部</div>
    </div>
</template>
<script>
    // 父组件
    Vue.component("father", {
        template: "#father",
        // 子组件
        components: {
            "son": {
                template: "#son",
                data:function () {
                    return {
                        names: ["zs", "ls", "ww", "zl"]
                    }
                }
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
        }
    });
</script>

 二：在ElementUI组件中的使用

在ElementUI表单中：

布尔值没办法直接渲染，可通过作用域插槽的方法绑定数据

scope.row表示：当前行数据的获取也会用到插槽（重要！）

        <el-table-column label="状态">
          <template slot-scope="scope">
            //可以先查看是否真的是获取到了行内数据，以及行内数据包含了哪些内容
            {{scope.row}}
            //使用开关组件接收布尔值
            <el-switch v-model="scope.row.mg_state">
           </el-switch>
          </template>
        </el-table-column>