Vue之组件化（一）

yuanshuai

发布于 2022-08-22 16:43:35

2840

发布于 2022-08-22 16:43:35

文章被收录于专栏：一只程序原

一、组件化思想

1.1、组件化思想

遇到一大堆复杂的问题时，直接上手解决的话是非常困难的。面对这种情况，我们可以将这个大问题细分成许多小问题，逐一的去研究解决这些小问题，累积下来，这个大问题也会被我们解决。

上述的思想就类似组件化的思想。当我们要完成一个页面的功能时，直接创建一个Vue.js就开始编写代码的话，不仅逻辑复杂，而且后期也不好维护。所以，要将一个页面划分成几个个小功能，完成这些小功能后，再将这个功能集成到页面中，当然，这些划分出的小功能也可以根据逻辑的复杂度再进行细分。

1.根据逻辑要求将页面划分成三个组件

2.计划独立完成各个组件的功能后，再集成到页面中

3.在完成每个组件时，可以根据逻辑再次细分组件，最后将每个完成的组件集成至页面

1.2、简述组件化的使用

1.生成组件构造器对象 2.注册组件 3.使用组件

二、组件化的基本使用过程

组件化的引入

如果想在页面中展示4次改代码。

通常的做法是，将该代码复制4次，最后在页面展示4个同样的效果。

但是，当我想要重复利用的模块，是由相对复杂的代码构成的，再次用复制的方法就会让代码结构变得复杂，不利于维护。

这时，就要引入组件化的使用。

组件化的使用过程：

2.1.生成组件构造器对象

用Vue的extend的方法生成组件构造器

extends()中的参数也是一个对象，对象中有一个template属性，template的属性值存储的就是我们想利用的组件模板的代码。 template的属性值是字符串类型，用ES6语法``(Tab键上的一个键)显示，可以对字符串换行的情况不做处理。ES5中字符串换行时，要用+进行拼接

            const myC = Vue.extend({
                template:`  
                <div>
                    <h2>hello</h2>
                    <p>你好</p>
                </div>`
            })

2.2.注册组件

利用Vue的component方法注册组件。

component方法中要传入两个参数， 1.使用组件模板的标签 2.组件构造器对象

            Vue.component('my-component',myC );

3.3.使用组件

用注册组件时的标签使用组件模板

        <div id="app">
            <my-component></my-component>
            <my-component></my-component>
            <my-component></my-component>
            <my-component></my-component>
        </div>

三、初用组件化遇坑总结

3.1.template模板中的HTML代码必须要有一个根标签

            const myC = Vue.extend({
                template:`  
                    <h2>hello</h2>
                    <p>你好</p>`
            })

h2和p标签没有一个根标签只展示了h2标签

报错信息：

3.2.创建Vue实例的代码要放在组件化代码的后面

报错信息：警告没有提供正确注册组件化标签名

正常运行：

3.3.注册组件的标签命名问题

1.注册组件的标签用小驼峰命名时，在html中使用组件时，要用-隔开

标签名用小驼峰命名法myCom

当html中使用组件时没用-隔开

mycom和myCom没有区别，html不区分大小写

报错：提示要提供正确的标签名

用-隔开后

正常显示

总结注册组件的标签名命名问题 1.注册组件时用小驼峰命名法时，html中使用组件时要用-隔开 2.注册组件时，组件的标签名可以都用小写，不要出现大写字母

四、全局组件和局部组件

4.1、全局组件

全局组件可以在多个Vue实例对象中使用

        <div id="app1">
            <!--3.使用全局组件-->
            <my-c></my-c>
        </div>
        <div id="app2">
            <!--3.使用全局组件-->         
            <my-c></my-c>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /*1.创建组件构造器*/
            const myC = Vue.extend({
                template: `
                <div>
                    <h2>全局组件</h2>
                </div>`
            })
            /*2.注册组件*/
            Vue.component('my-c',myC);
            
            /*Vue的实例化对象1*/
            const app1 = new Vue({
                el: '#app1'
            })
            
            /*Vue的实例化对象2*/
            const app2 = new Vue({
                el: '#app2'
            })
        </script>

在两个Vue实例对象app1和app2中都能使用全局组件

4.2.局部组件（常用）

局部组件创建在Vue实例中，该组件也只能在该实例中使用局部组件的创建方法： 1.生成组件构造器 2.在Vue实例中注册组件注册组件在Vue的components属性中操作

            /*1.生成组件构造器*/
            const myCom = Vue.extend({
                template: `
                <div>
                    <h2>局部组件</h2>
                </div>`
            })
            /*Vue的实例化对象1*/
            /*2.在Vue实例中注册组件*/
            const app1 = new Vue({
                el: '#app1',
                components: {
                    myc:myCom
                }
            })

myc就是注册组件的标签名 myCom就是组件构造器

在app1和app2中都使用全局组件和局部组件

        <div id="app1">
            <!--3.使用全局组件-->
            <my-c></my-c>
            <!--使用局部组件-->
            <myc></myc>
        </div>
        <div id="app2">
            <!--3.使用全局组件-->
            <my-c></my-c>
            <!--使用局部组件-->
            <myc></myc>
        </div>