组件化的基本使用过程

组件化的引入

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

image.png

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

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

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

组件化的使用过程：

1.生成组件构造器对象

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

image.png

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

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

2.注册组件

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

image.png

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

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

3.使用组件

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

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

image.png