Vue全局组件的使用

最新推荐文章于 2024-01-18 10:54:36 发布

2B青年弹棉花

最新推荐文章于 2024-01-18 10:54:36 发布

阅读量81

点赞数

分类专栏： Vue学习文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42158198/article/details/104764358

版权

Vue学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue/dist/vue.js"></script>
    <style type="text/css">
        .primary{
            background-color: red;
        }
        .success{
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script type="text/javascript">
        /*全局组件*/
        Vue.component('VBtn',{
            template:`
                <button v-bind:class="type">
                <slot></slot>
                </button>
            `,
            props:['type']
        });
        /*局部组件*/
        //头部组件
        var Vhander = {
            data(){
                return{}
            },
            template:`
                <div>头部组件
                    <VBtn type="primary">登录</VBtn>
                    <VBtn type="success">注册</VBtn>
                </div>
            `,
            methods:{}
        };
        var Vmenu = {
            data(){
                return{}
            },
            template:`
                <div>菜单栏组件</div>
            `,
            methods:{}
        };
        var Vcontent = {
            data(){
                return{}
            },
            template:`
                <div>内容组件</div>

            `,
            methods:{}
        };
        var AppTemp = {
            data(){
                return{
                }
            },
            components:{
                Vhander:Vhander,
                Vcontent:Vcontent,
                Vmenu:Vmenu
            },
            template: `
                <div>
                    <Vhander />
                    <Vmenu />
                    <Vcontent />
                </div>
            `
        };
        new Vue({
            el:'#app',
            data(){
                return{

                }
            },
            components:{
                AppTemp:AppTemp
            },
            template:`<AppTemp />`
        });
    </script>
</html>

2B青年弹棉花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue全局组件的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../vue/dist/vue.js"></...
复制链接

扫一扫

专栏目录