[vue]7-vue的组件化

认识组件化

什么是组件化

人面对复杂问题的处理方式：

• 任何一个人处理信息的逻辑能力都是有限的
• 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。
• 但是，我们人有一种天生的能力，就是将问题进行拆解。
• 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。

组件化也是类似的思想：

• 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
• 但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

• 我们将一个完整的页面分成很多个组件。

• 每个组件都用于实现页面的一个功能块。

• 而每一个组件又可以进行细分。

Vue组件化思想

组件化是Vue.js中的重要思想

• 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
• 任何的应用都会被抽象成一颗组件树。

组件化思想的应用：

• 有了组件化的思想，我们在之后的开发中就要充分的利用它。
• 尽可能的将页面拆分成一个个小的、可复用的组件。
• 这样让我们的代码更加方便组织和管理，并且扩展性也更强。

所以，组件是Vue开发中，非常重要的一个篇章。

组件如何定义，以及如何使用呢？

定义vue组件

    <div id="app">
        <input type="text" v-model.trim="message">
        <p>输入的内容是:{{message}}哟哟哟</p>
    </div>
    <script>
        // 定义一个组件构造器，也就是一个组件
        const myComponent = Vue.extend({
            // 这里有一个属性，template，表示模板的意思，也就是我们要在这个组件里面定义模板。
            template:`
            <div>
                <h2>组件标题</h2>
                <p>我是组件中的段落内容</p>
            </div>
            `
        })

        let app = new Vue({
            el: '#app',
        })
    </script>

上面就是定义了一个组件，但是要注意的是在vue中，组件定义了以后不能直接使用，需要注册一下组件。

注册并使用组件

    <div id="app">
        <!-- 步骤三、使用组件 -->
        <my-cpn></my-cpn>
    </div>
    <script>
        // 步骤一、创建组件构造器
        const myComponent = Vue.extend({
            template:`
            <div>
                <h2>组件标题</h2>
                <p>我是组件中的段落内容</p>
            </div>
            `
        })
        // 步骤二、注册组件，并且定义组件标签的名称
        // 使用Vue.Component来注册组件，它的第一个参数是你在使用组件时候的名字，第二个参数，是注册哪个组件。
        // 这种注册方式称为全局注册，后面还会讲。
        Vue.component('my-cpn', myComponent)
        let app = new Vue({
            el: '#app',
        })
    </script>

使用组件有三个步骤：

• 定义组件，也就是创建组件构造器
• 注册组件
• 使用组件

注册组件步骤解析

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

1、Vue.extend()：

• 调用Vue.extend()创建的是一个组件构造器。
• 通常在创建组件构造器时，传入template代表我们自定义组件的模板。
• 该模板就是在使用到组件的地方，要显示的HTML代码。
• 事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。

2、Vue.component:

• 调用[Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
• 所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

3、组件必须挂载在某个Vue实例下，否则它不会生效

​ 这里举个栗子

    <div id="app">
        <!-- 我们把叫app的vue实例挂载到了id为app的dom上 -->
        <my-cpn></my-cpn>
    </div>

    <!-- 我们把叫app1的vue实例挂载到了id为app1的dom上 -->
    <div id="app1">
        <div>
            <my-cpn></my-cpn>
        </div>
    </div>

    <!-- 这个dom没有挂载任何vue实例 -->
    <div>
        <my-cpn></my-cpn>
    </div>
    <script>
        const myComponent = Vue.extend({
            template: `
            <div>
                <h2>组件标题</h2>
                <p>我是组件中的段落内容</p>
            </div>
            `
        })
        Vue.component('my-cpn', myComponent)
        let app = new Vue({
            el: '#app',
        })
        let app1 = new Vue({
            el: '#app1'
        })
    </script>

全局组件和局部组件

全局组件

当我们通过调用 Vue.component() 注册组件时，组件的注册是全局的

这意味着该组件可以在任意Vue实例下使用, 上面有体现

局部组件

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

    <div id="app1">
        <div>
            <my-cpn></my-cpn>
        </div>
    </div>

    <div>
        <my-cpn></my-cpn>
    </div>
    <script>
        const myComponent = Vue.extend({
            template: `
            <div>
                <h2>组件标题</h2>
                <p>我是组件中的段落内容</p>
            </div>
            `
        })
        let app = new Vue({
            el: '#app',
            //注意这里是components,有个s
            components: {
                'my-cpn': myComponent
            }
        })
    </script>

全局组件嵌套

全局组件嵌套没有固定的嵌套关系，嵌套关系是由书写方式决定的。