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>