前端Vue的组件化的思想以及创建组件的步骤_前端组件库建设思想-优快云博客

本文链接：https://blog.youkuaiyun.com/l2470334493/article/details/111657487

本文介绍了Vue的组件化思想，强调组件化在代码组织和管理中的重要性。详细阐述了注册组件的步骤，包括创建组件构造器、全局与局部组件的注册，以及注册组件的语法糖。通过实例说明了如何在Vue应用中正确使用和组织组件，以便提高代码的可复用性和扩展性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、认识组件化

人面对任何一个人处理信息的逻辑能力都是有限的，所以当面对一个复杂的问题的时候，我们不太可能一次性搞定一大堆内容。

但是我们可以将问题进行拆解
组件化就是我们将一个页面拆分成一个个的小的功能块，每个功能块完成属于自己的这部分独立的功能，那么大的问题也就迎刃而解了。

组件化是Vue.js中的重要思想
它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
任何的应用都会被抽象城一颗组件树
组件化的思想的应用：
- 有了组件化的思想，我们在之后的开发中就要充分的利用它。
- 尽可能的将页面拆分成一个个小的，可复用的组件。
- 这样让我们的代码更加方便组织和管理，并且扩容性也更强。

2、注册组件

2、1 注册组件的基本步骤

注册组件分为三个步骤
- 创建组件构造器
- 注册组件
- 使用组件
那么如何通过代码来注册组件？

 <div id= "app" >
        <!--3、使用组件-->
        <my-cpn></my-cpn>
     </div>
    
    <script src="../js/vue.js"></script>
    <script>
        //1、创建组件化构造器
        const myComponent = Vue.extend({
            template:`
            <div>
            <h2>组件标题</h2>
            <p>我是组件中的一个段落内容</p>
            </div>
            `
        });
        // 2、注册组件，并且定义组件标签的名称
        Vue.component('my-cpn',myComponent)
    </script>

这里的步骤都是什么含义呢？

1、 Vue.extend():
- 调用Vue.extend()创建的是一个组件构造器
- 通常在创建组件构造器的时候，传入template代表我们自定义组件的模板。
- 该模板就是在使用到组件的地方，要现实的html代码
- 事实上，这种写法，在Vue2.x的文档中几乎已经看不到了，它会直接使用后面的其他方法，这种方式是后面方式的基础
2、Vue.component():
- 调用Vue.component()是将刚才的组件构造器注册为一个组件，并给它起一个组件的标签名称
- 所以需要传递两个参数，1、注册组件的标签名 2、组件构造器
3、组件必须挂载在某个Vue的实例下，否则它不会生效。
- 我们接下来使用三次< my-cpn >< /my-cpn >
- 而第三次其实没有生效

2、2 全局组件和局部组件

当我们通过调用Vue.component()注册组件时，组件的注册时全局的，这就以为这我们可以在任意Vue示例下使用。
如果我们注册的组件是挂载在某个实例中，那么就是一个局部组件。
-
在前面我们看到的组件树，可以看到，组件之间是存在层级关系的，其中一种非常重要的关系就是父子组件的关系
我们来通过代码来看如何创建这种层级关系。

    <div id= "app" >
        <my-cpn></my-cpn>
     </div>
    <script src="../js/vue.js"></script>
    <script>
        // 1、创建一个子组件
        const childComponent = Vue.extend({
            template:`
            <div>我是子组件，我是child</div>
            `
        });
        // 2、创建一个父组件的构造器
        const parentComponent = Vue.extend({
            template:`
            <div>我是父组件的内容，我是parent</div>
            `,
            component:{
                'child-cpn':childComponent
            }
        })
       let app = new Vue({
           el:"#app",
           components:{
               'parent-cpn':parentComponent
           }
       })
    </script>