vue全局组件和局部组件用法

一般的应用,会拥有一个根实例,在根实例里面都是一个一个的组件。

因为组件是要嵌入到实例或者父组件里的,也就是说,组件可以互相嵌套

所有的组件最外层必须有一个根实例

组件分为:全局组件和局部组件

全局组件在任意的实例、父级组件中都能使用,局部组件只能在创建自己的父级组件或者实例中使用
全局注册组件:

Vue.component("zidingyi", {

	template: `<h1>我是一个全局组件</h1>`

})

使用全局组件: 在任意的vue视图中

<div id="app">
    <zidingyi></zidingyi>  <!--在第一个挂载点内使用-->
</div>

局部注册组件: 写在了某个Vue实例内 注意是components 带s 表示复数

var v1 = new Vue({
    el: "#app",
    // components配置项用于定义组件 因为写在了某个Vue实例内 所以只能在这个实例内使用 所以叫做局部组件
    components: {
        // 属性名表示组件名
        // 属性值是一个对象 
        zidingyi: {
            template: `<h1>我是一个局部组件</h1>`
        }
    }
})
 <div id="app">
        <zidingyi></zidingyi>  <!--在第一个挂载点内使用-->
    </div>

    <hr>
    <div id="app1">
        <zidingyi></zidingyi> <!--在第二个挂载点内不能使用第一个的组件-->
    </div>

局部组件只能在所在的Vue实例内使用

也可以这样定义

  // 定义全局组件
        Vue.component("zidingyi", {
            template: "#tpl",// template这里 既可以写具体的html标签字符串 也可以写选择器
        })
        var v1 = new Vue({
            el: "#app",
            data: {}
        })
 <div id="app">
        <zidingyi></zidingyi>
    </div>
    <!-- 可以把组件的html结构写在 template标签内,相当于是一个模板 通过id进行关联 -->
    <template id="tpl">
        <h1>我是一个组件</h1>
    </template>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值