vue创建组件和实现组件的动态切换

最新推荐文章于 2024-07-11 09:58:06 发布

前方太黑暗

最新推荐文章于 2024-07-11 09:58:06 发布

阅读量313

点赞数 1

分类专栏： vue 文章标签： vue创建组件组件切换箭头函数

本文链接：https://blog.csdn.net/xcc_2269861428/article/details/102487294

版权

vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="rou">
        <button @click="change1">角色</button>
        <button @click="change2">用户</button>
        <keep-alive>
            <component :is="type"></component>
        </keep-alive>
    </div>

    <template id="role">
        <h3>{{name}}</h3>
    </template>

    <template id="user">
        <h3>{{name}}</h3>
    </template>

    <script>
        var aj = new Vue({
            el: '#rou',
            data: {
                type:'role'
            },
            components: {
                'role': {
                    template: '#role',
                    data:()=>{
                        return {"name":"角色管理界面"}
                    }
                },
                'user': {
                    template: '#user',
                    data:()=>{
                        return {"name":"用户管理界面"}
                    }
                }
            },
            methods: {
                change1:()=>{
                 aj.type= 'role'
                },
                change2:()=>{
                 aj.type= 'user'
                }
            }
        })
    </script>
</body>
</html>