Vue中的v-slot如何使用

今天看了看Vue的文档，发现了v-slot这个指令，生怕掉队的我赶紧补习了一下

直接上代码！！！

//父组件
<template>
    <!--在此处添加渲染的内容-->
    <div>
        <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

        <base-prop :dialogFormVisible="dialogFormVisible" :title="title" @backBtn="back" @submitBtn="submitBtn">
            //这种是简写方式，也可以写成v-slot:contents，还可以使用作用域
            <template #contents>
                <el-form :model="form">
                    <el-form-item label="活动名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </template>
        </base-prop>
    </div>
</template>

<script type="text/ecmascript-6">
    import BaseProp from './BaseProp.vue'
    //将渲染的内容导出
    export default{
        props: {},
        data(){
            return {
                dialogFormVisible: false,
                title: '测试',
                form: {
                    name: '',
                    region: ''
                },
                formLabelWidth: '120px'
            }
        },
        methods: {
            submitBtn(obj){
                console.log(this.form);
                console.log(obj);
            },
            back(b){
                this.dialogFormVisible = b;
            }
        },
        components: {BaseProp},
        computed: {},
        watch: {},
        created(){
        },
        mounted(){
        },

    }
</script>

<style scoped>
    /**渲染内容的样式**/
</style>

//子组件
<template>
    <!--在此处添加渲染的内容-->
    <div>
        <el-dialog :title="title" :visible.sync="visible">
            <slot name="contents"></slot>
            <div slot="footer" class="dialog-footer">
                <el-button @click="back">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    //将渲染的内容导出
    export default{
        props: {
            title: {//标题
                type: String,
                default: () => {
                    return '弹出层'
                }
            },
            dialogFormVisible: {
                type: Boolean,
                required: true
            }

        },
        data(){
            return {
                visible: false
            }
        },
        methods: {
            back(){
                this.visible = false;
            },
            submit(){
                this.$emit('submitBtn', true);
            }
        },
        components: {},
        computed: {
        },
        watch: {
            'dialogFormVisible': function (newVal, oldVal) {
                this.visible = newVal;
            },
            'visible': function (newVal, oldVal) {
                this.$emit('backBtn', newVal);
            }
        },
        created(){
        },
        mounted(){
        },

    }
</script>

<style scoped>
    /**渲染内容的样式**/
</style>