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

Vue 专栏收录该内容
8 篇文章 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
    点赞
  • 0
    评论
  • 3
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

像鱼的畅

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值