solt插槽简单使用实例

在父组件内可以定义方法，变量 等，还可以在父组件中使用呢。

样式可以在子组件里写，也可以在父组件写。

子组件：

<template>
    <div class="admin-user-layout">
        bujubububububuubub
        <slot></slot>
    </div>
</template>
 
<script>
    export default {
        name: "AdminUserLayout"
    }
</script>
 
<style scoped lang="stylus">
    .testtest
        color: red
</style>

父组件中使用：

<template>
    <div class="admin-user-detail">
        <!--测试-->
        <AdminUserLayout>
            <div @click="handleAmend" class="testtest">点击点击</div>
            <input type="text" v-model="testmodel">
        </AdminUserLayout>
 
    </div>
</template>
 
<script>
 
    import BtnGoupBottom from "../components/basic/BtnGroupBottom"
    import AdminUserLayout from "../components/basic/AdminUserLayout"
    export default {
        name: "AdminUserDetail",
        components:{
            AdminUserLayout
        },
        data(){
            return{
                detailData: {},
                testmodel: ''
            }
        },
        /*
        watch: {
            testmodel: function (val, oldVal) {
                console.log(val);
            }
        },
        */
        methods: {
 
            //修改
            handleAmend(){
                console.log('修改');
            }
        }
 
    }
</script>
 
<style scoped lang="stylus">
 
</style>