Vue的组件化开发-1

1.概念

组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。
在自定义组件时，会用到Vue的全局APIVue.extend()和Vue.component()。
(1) Vue.extend()
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

(2) Vue.componment()
注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称。

创建并使用一个组件可以分为3步：

1. 创建组件构造器 Vue.extend()
2. 注册组件 Vue.componment()
3. 在html中使用该组件

(实例代码可参考下文任意一段代码)

2.全局组件与局部组件

（1） 全局组件
全局组件，意味着可以在多个Vue的实例下使用。如下所示，既可以在id为app的<div>下使用，也可以在id为app2的<div>下使用。

<div id="app">
    <my-cpn></my-cpn>
</div>
<div id="app2">
    <my-cpn></my-cpn>
</div>

<script>
    //``ES6 字符串语法，可以换行
    //1.创建组件构造器对象
    const cpnc = Vue.extend({
        template:`<div>
                    <h2>i love u.</h2>
                    <p>okok,just so so.</p>
                  </div>`
    })
    //2.注册组件
    Vue.component('my-cpn',cpnc)//全局组件，意味着可以在多个Vue的实例下使用
    //Vue实例化对象--app和app2
    const app = new Vue({
        el:'#app',  //用于管理要挂载的数据
        data:{     //定义数据
        }
    });
    const app2 = new Vue({
        el:'#app2'
    });
</script>

结果如下：

（2）局部组件
局部，就意味着，只能在某个Vue实例下使用。
如下所示。

<div id="app">
    <cpn2></cpn2>
</div>
<div id="app2">
    <cpn2><cpn2>
</div>

<script>
    //``ES6 字符串语法，可以换行
    //1.创建组件构造器对象
    const cpnc = Vue.extend({
        template:`<div>
                    <h2>i love u.</h2>
                    <p>okok,just so so.</p>
                  </div>`
    })
    //2.注册组件(局部)
    const app = new Vue({
        el:'#app',  //用于管理要挂载的数据
        data:{     //定义数据
        },
        components:{
            //cpn使用组件时的标签名
            cpn2:cpnc
        }
    });
    const app2 = new Vue({
        el:'#app2'
    });
</script>

3.父组件与子组件

我们一般注册构造器是在Vue实例中，而父组件与子组件的关系则不一样。
子组件的注册是在父组件中。
父组件的注册在Vue实例中。

• 达到效果：可以在父组件中使用子组件。

<div id="app">
    <cpn></cpn>     
</div>

<script>
    //``ES6 字符串语法，可以换行
    //1.创建组件构造器对象
    //子组件
    const cpnc2 = Vue.extend({
        template:`<div>
                    <h2>i love u,and i am son.</h2>
                    <p>这是第二个组件.</p>
                  </div>`
    });
    //父组件
    const cpnc = Vue.extend({
        template:`<div>
                    <h2>i love u.</h2>
                    <cpn2></cpn2>   //使用子组件
                    <p>我是第一个组件.</p>
                  </div>`,
        components:{
            cpn2:cpnc2   //注册子组件
        }
    });

    
    const app = new Vue({
        el:'#app',  //用于管理要挂载的数据
        components:{
            cpn:cpnc        //注册父组件
        }
    });
</script>

结果如下：

（子组件要写在父组件前。）
（一般也可以认为Vue实例是最顶层的组件–root）

另外，子组件不能在html中直接使用（超出了子组件的作用域）。

4.语法糖写法

(1) 全局组件

原来的写法：

    const cpnc2 = Vue.extend({
        template:`<div>
                    <h2>人生啊。。。</h2>
                  </div>`
    });
    Vue.component('cpn2',cpnc2)

语法糖：

    Vue.component('cpn23',{
        template:`<div>
                    <h2>人生啊。。。</h2>
                  </div>`
    });

(2) 局部组件

原来的写法：

    const cpnc = Vue.extend({
        template:`<div>
                    <h2>人生啊。。。</h2>
                  </div>`
    });
    
    const app = new Vue({
        el:'#app',  //用于管理要挂载的数据
        components:{
            //cpn使用组件时的标签名
            cpn:cpnc
        }
    });

语法糖：

    const app = new Vue({
        el:'#app',  //用于管理要挂载的数据
        components:{
            //cpn使用组件时的标签名
            cpn:{
                template: 
                `<div>
                    <h2>人生啊。。。</h2>
                  </div>`
            }
        }
    });

5.组件模板抽离写法

开发中不常使用，暂时略过。

6.组件的data数据存放

前面的组件内容都是写死的，而在开发中我们会使用传来的数据。
这里需要提出的一点是，由于组件属于一个单独封装的部分，因此组件的data不能放在Vue实例的data模块中，在组件内部应该有一个地方用于存放组件内的data。

与Vue实例里面的data不同的时，组件的data不能是object，而必须是一个function，这个function返回一个object，object内部保存着数据。

<div id="app">
    <cpn23></cpn23>
</div>

<script>
    Vue.component('cpn23',{
        template:`<div>
                    <h2>人生啊。。。</h2>
                    <p>{{title}}</p>
                  </div>`,
        data(){
                return {
                    title:'这是data里面的title'
                }
            }
    });
</script>

结果：

关于为什么Vue组件data只能是function，指路博客链接

(鉴于篇幅过长， 进一步的组件问题会在下一篇文章《Vue的组件化开发-2》中讲)