Vue组件化的实现与基本步骤

基本步骤

组件的基本步骤（原始步骤）

1. 创建组件构造器
2. 注册组件
3. 使用组件

代码如下

 	<div id="app"> 
 		//使用组件
        <mycpn></mycpn> 
    </div>

    <script>
        // 创建组件构造器
        const myComponent = Vue.extend({
            template: `
            <div>
                <h2>组件标题</h2>
            </div>
            `
        })
        //注册全局组件
        Vue.component('mycpn' , myComponent)
        
        //'mycpn' 为组件标签名 myComponent 为一个组件构造器

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

1. Vue.extend() 创建组件构造器，template写入组件模板，注意：你输入的为多行字符串，你需要使用``在里边写入。

2. 注册组件，使用Vue.component()，需传两个参数，一个是你取的自定义组件名，一个是对应的组件构造器（对象）

3. 挂载到 Vue

   以上这种方式创建组件很麻烦，这样给你看只是为了让你明白其中的原理，事实上，我们应该使用语法糖的方式

组件的简化步骤（语法糖）

代码如下

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


    <script>
   
        //注册组件 + 创建组件构造器
        Vue.component('mycpn' , {
            template: `
            <div>
                <h2>组件标题</h2>
            </div>
            `   
        })
        //'mycpn' 为组件标签名 myComponent 为一个组件构造器

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

Vue.component( ) 这个方法第二个参数是一个组件对象，我们直接写入对象 { } ，省去了Vue.extend()，直接用一个对象来代替。

全局组件&局部组件

以上的这个例子，其实已然是一个全局组件，但有时我们也需要一个局部组件。

那么我们该如何写写一个局部组件呢，其实很简单，先上代码！！
代码如下

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

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>

        const app = new Vue({
            el: "#app",
            components: {
                'mycpn': {
                    template: 
                    `
                        <div>
                            <h2>组件标题</h2>
                        </div>
                    `
                }
            }
        })

    </script>

我们可以看到，如果你要注册一个局部组件，你需要在Vue里边写入
components：{}
要注意的是components还有个s
第一个参数就是名字，第二个就是我所说的组件构造器（对象）

这里我们还有一个要特别注意的点是，你自己写的组件的名字，如果是驼峰标识法的话，你就要特别注意了，v-bind是不支持驼峰标识法的，但是你如果还想写驼峰，你必须在驼峰的地方加入-分隔符
例如 你写的名字为 cInfo 那么你在v-bind里边应该写入c-info 必须全是小写，
如果你不这么写的话，浏览器会报错

模板分离（简化代码）

在开发中，像以上的写法，如果都在comnents里边写入模板，这样就会让代码显得很臃肿，所以我们需要模板分离，模板分离的写法有两种

第一种方式script方式

代码如下

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

    <script type="text/x-template" id="cpn">
        `
        <div>
            <h2>组件标题</h2>
        </div>
    `
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>

        const app = new Vue({
            el: "#app",
            components: {
                'mycpn': {
                    template: '#cpn'
                  
                }
            }
        })

    </script>

这样的写法已然将代码分离，但是身为程序员，我们应该追求的是更加简洁的方式，那就是我要说的template方式

第二种方式

代码如下

<div id="app">
        <mycpn></mycpn>
    </div>
    <template id="cpn">
        <div>  
            <div>
                <h2>组件标题</h2>
            </div>
        </div>
    </template>

      
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>

        const app = new Vue({
            el: "#app",
            components: {
                'mycpn': {
                    template: '#cpn'
                  
                }
            }
        })

    </script>

这样子的写法，大大简化了代码，让我们的代码显得逻辑性更强，别人来看我们的代码就会觉得思路很清晰，这样子也方便查找