Vue中的v-slot如何使用

悠悠 2022-02-13 03:57 234阅读 0赞

今天看了看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>