Vue全局组件和局部组件

Vue全局组件和局部组件

全局组件

全局组件含义和使用方法

全局组件,就是所有 vue 实例中都可以使用的组件

注册全局组件方法如下

我们可以使用 Vue.extend() 函数,也可以不用,直接使用 Vue.component()来创建一个 Vue 的构造器

<div id= "app">
<my-component></my-component>
</div>
<script>
    // 注册
    Vue.component('my-component',{
       template:'<h1>自定义组件</h1>'
    })
    // 创建根实例
    var VM = new Vue({
         el:"#app"
    })
</script>
局部组件

1、局部组件含义和使用方法

我们使用 Vue 对象的 components 属性来实现局部组件注册,顾名思义局部组件就是只能在当前对象中使用的组件

<div id= "app">
<my-component></my-component>
</div>
<script>
var child = {
   template:'<h1>自定义组件</h1>'
}
// 创建一个根实例
var VM = new Vue ({
    el:"#app",
    conmponents:{
             // <my-component>  只在父模板可用
             'my-component':child
     }
})
</script>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值