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>

巴特西

solt插槽简单使用实例

最新文章

热门文章