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>