第六节：Vue组件化开发(4)-全局组件和局部组件

最新推荐文章于 2022-09-05 20:32:12 发布

binggoling

最新推荐文章于 2022-09-05 20:32:12 发布

阅读量234

点赞数

分类专栏： VueJS 文章标签： vue js html

本文链接：https://blog.csdn.net/qq_30442207/article/details/108813278

版权

VueJS 专栏收录该内容

43 篇文章 7 订阅

订阅专栏

文章目录

前言
系列文章目录，Vue学习目录，每一章都有代码例子说明
四、Vue-全局组件和局部组件
ALL：组件模板的学习目录
上一节：第六节：Vue组件化开发(3)-Vue组件模板的分离写法
下一节：第六节：Vue组件化开发(5)-父组件和子组件

前言

本博客的内容很多都来自官网，现在只是把自己的一些理解写出来给大家一起讨论学习
Vue官网

系列文章目录，Vue学习目录，每一章都有代码例子说明

四、Vue-全局组件和局部组件

4.1 什么是全局组件？

全局组件：只要是用 Vue.component 来创建的组件都是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中，局部组件和子组件都能使用。
比如你实例了两个new Vue()，这个全局组件就可以在这两个实例上都可以使用。（但是我们一般不会创建两个实例）
下面代码说明，我创建了全局组件，在两个实例app和app1都可以使用

<body>
<div id="app"  >
    <component1></component1>
</div>
<div id="app1" >
    <component1></component1>
</div>

<template id="component1">
    <div style="background: darkcyan">
        <h2>我的第一个组件</h2>
    </div>
</template>
</body>
<script src="../css/vue.js"></script>
<script>
    Vue.component('component1', {
        template: '#component1'
    });
    const app = new Vue({
        el: '#app'
    })
    const app1 = new Vue({
        el: '#app1'
    })
</script>

4.2 什么是局部组件？

局部组件：在实例的属性components或者是组件里的属性components上注册组件，叫局部组件，局部注册的组件在其子组件中不可用，如果要使用需要多重嵌套。

用下面的代码说明：在实例中只用component2组件，不能使用component1，因为component1没有在实例上注册

<body>
<div id="app"  >
    <component1></component1>
    <!-- component2使用会报错 -->
    <component2></component2>
</div>
<template id="component1">
    <div style="background: darkcyan">
        <h2>我的第一个组件</h2>
    </div>
</template>
<template id="component2">
    <div style="background: aqua">
        <component1></component1>
        <h2>我的第二个组件</h2>
    </div>
</template>

</body>
<script src="../css/vue.js"></script>
<script>
	const component1 = {
        template: '#component1'
    }
    const component2 = {
        template: '#component2',
        components: {
            'component1': component1
        }
    }
    const app = new Vue({
        el: '#app',
        components: {
            'component2': component2
        }
    })
</script>

4.3 完整例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body>
<div id="app"  >
    <component1></component1>
    <component2></component2>
</div>

<div id="app1" >
    <component1></component1>
</div>

<template id="component1">
    <div style="background: darkcyan">
        <h2>我的第一个组件</h2>
        <h2>你们好</h2>
    </div>
</template>

<template id="component2">
    
    <div style="background: aqua">
        <component1></component1>
        <h2>我的第二个组件</h2>
    </div>
</template>

</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 全局组件：只要是用 Vue.component 来创建的组件都是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中，局部组件和子组件都能使用
     * 比如你实例了两个new Vue();这个全局组件就可以在这两个实例上都可以使用。（但是我们一般不会创建两个实例）
     * */
    Vue.component('component1', {
        template: '#component1'
    });

    /**
     * 局部组件：在实例的属性components或者是组件里的属性components上注册组件，叫局部组件，局部注册的组件在其子组件中不可用，如果要使用需要多重嵌套
     * @type {{template: string}}
     */
    const component2 = {
        template: '#component2'
    }
    const app = new Vue({
        el: '#app',
        components: {
            'component2': component2
        }
    })

    const app1 = new Vue({
        el: '#app1',
    })

</script>
</html>

展示效果：

在这里插入图片描述

ALL：组件模板的学习目录

上一节：第六节：Vue组件化开发(3)-Vue组件模板的分离写法

下一节：第六节：Vue组件化开发(5)-父组件和子组件

binggoling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
第六节：Vue组件化开发(4)-全局组件和局部组件

文章目录前言系列文章目录，Vue学习目录，每一章都有代码例子说明四、Vue-全局组件和局部组件4.1 什么是全局组件？4.2 什么是局部组件？4.3 完整例子展示效果：前言本博客的内容很多都来自官网，现在只是把自己的一些理解写出来给大家一起讨论学习 Vue官网系列文章目录，Vue学习目录，每一章都有代码例子说明四、Vue-全局组件和局部组件4.1 什么是全局组件？全局组件：只要是用 Vue.component 来创建的组件都是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue
复制链接

扫一扫