十六、Vue组件化开发之全局组件与局部组件

作者: 温新

分类: 【Vue.js】

阅读: 1820

时间: 2020-12-04 14:23:59

什么是组件化

简单地说，组件化是将某个功能抽离其本身进行单独打包以便利于复用的代码片段。

解释：如2个页面，都需要一个相同的头部导航，

1）普通的做法，2个页面中使用同一段相同的头部导航代码，问题是冗余；

2）组件化做法，将头部抽离成一个单独的页面（也就是组件），哪个地方需要就在哪个地方调用。

使用组件化的好处

1）代码复用，避免重复造轮子，提交工作效率；

2）利于代码的组织与管理；

3）降低代码之间的耦合，提提高代码扩展性；

Vue组件化

Vue中，组件可以分为全局组件与局部组件。全局组件在页面vue接管的中的任何地方可以使用，局部组件只在定义其本身使用。

下面将通过实际案例来演示全局组件与全局组件。

全局组件

全局组件写法一（推荐）

<div id="app">
    <!--调用组件-->
    <nav-title></nav-title>
    <nav-title></nav-title>
</div>

<div id="app2">
    <!--Vue实例2中也可以使用全局组件-->
    <nav-title></nav-title>
</div>

<script>
    // 定义全局组件
    Vue.component('nav-title',{
        template:`<nav><ul><li>首页</li><li>PHP</li></ul></nav>`
    });

    var app = new Vue({
        el:"#app",
    });
    new Vue({
        el:"#app2"
    });
</script>

全局组件写法二

<div id="app">
    <!--调用组件-->
    <nav-title></nav-title>
</div>
<script>
    // 1、创建组件构造器
    const navTitle = Vue.extend({
        template:`<nav><ul><li>首页</li><li>PHP</li></ul></nav>`
    });
    // 2、注册全局组件
    Vue.component('navTitle',navTitle);

    var app = new Vue({
        el:"#app",
    });
</script>

局部组件

在vue实例内部使用components注册的组件为局部组件，局部组件在能在该vue实例中使用。

<div id="app">
    <!--调用组件-->
    <nav-title></nav-title>
</div>
<script>
    const navTitle = {
        template:`<nav><ul><li>首页</li><li>PHP</li></ul></nav>`
    }

    var app = new Vue({
        el:"#app",
        data:{

        },
        components:{
            navTitle: navTitle
        }
    });
</script>

注意，若组件名的驼峰法命名，在调用组件名，使用中划线隔开，如nav-title

写法二

<!DOCTYPE html>
<html>
<head>
    <title>组件-局部组件</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--调用组件-->
    <nav-title></nav-title>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{

        },
        components:{
            navTitle: {
                template:`<nav><ul><li>首页</li><li>PHP</li></ul></nav>`
            }
        }
    });
</script>
</body>
</html>

2020-12-04

请登录后再评论