Vue 中的组件声明&全局组件与局部组件的书写区别

最新推荐文章于 2023-07-21 14:34:29 发布

避坑记录

最新推荐文章于 2023-07-21 14:34:29 发布

阅读量663

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44068262/article/details/112715102

版权

Vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、全局组件的声明

二、全局组件与局部组件的书写区别

一、全局组件的声明

首先，我按照往常的习惯先声明了 vue，写出来的代码貌似表面上看上去并没有错误，但是它的确是错误的，而且这个错误我找了很久

刚开始的代码

<body>
    <div id="app">
        <my-component></my-component>
    </div>
</body>


<script>

    var vm = new Vue({
        el:"#app"
    });

    Vue.component('my-component',{
        template:"<h1 class ='foo'>这是全局组件</h1>"
    })

</script>

找了很久的错误，我发现居然是一个顺序的问题，全局组件必须是先定义组件，在定义 vue

修改后的代码

<script>

    Vue.component('my-component',{
        template:"<h1 class ='foo'>这是全局组件</h1>"
    })

    var vm = new Vue({
        el:"#app"
    });

</script>

二、全局组件与局部组件的书写区别

全局组件和局部组件可以写在一个 div 中
全局组件的使用是 先定义组件，在定义 vue ,是用 Vue.component({})
局部组件的使用是 写在定义好的vue中，是用 components:{}

<body>
    <div id="app">
        <my-component></my-component>
        <br><br><br>
        <my-template></my-template>
    </div>
</body>


<script>
    
    //全局组件的写法
    Vue.component('my-component',{
        template:"<h1 class ='foo'>这是全局组件</h1>"
    })

    var vm = new Vue({
        el:"#app",
        components:{    //局部组件的写法
            'my-template':{template:'<p>这是局部组件</p>'}
        }
    });

</script>

避坑记录

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue 中的组件声明&全局组件与局部组件的书写区别

目录一、全局组件的声明二、全局组件与局部组件的书写区别一、全局组件的声明首先，我按照往常的习惯先声明了 vue，写出来的代码貌似表面上看上去并没有错误，但是它的确是错误的，而且这个错误我找了很久刚开始的代码<body> <div id="app"> <my-component></my-component> </div></body><script>
复制链接

扫一扫