Vue 组件化

Vue组件化思想
1.尽可能将页面拆分成一个个小的，可复用的组件
2.使代码更加方便组织和管理，并且扩展性更强

一、组件的三个步骤
1.创建组件构造器
2.注册组件
3.使用组件

1）调用vue.extend()方法 创建组件构造器
2）调用vue.component()方法 注册组件
3）在vue实例的作用范围内 使用组件

   /* 创建 组件构造器 */
     const Cpn =Vue.extend({
     template:`
     <div>
       <h2>我是标题</h2>
       <p>我是组件</p>  
     </div>
  `
   })
  /* 注册组件 */
   Vue.component(‘mycpn‘,Cpn)

  <!-- vue实例的作用范围 -->
    <div id="app">
      <!-- 使用组件 -->
      <mycpn></mycpn>
    </div>

二、简便写法

    /* 简便写法   将组件构造器写在注册组件中*/
     Vue.component("cpn2", {
     template:`
     <div>
        <h2>我是标题2</h2>
        <p>我是组件2</p>  
     </div>
    `
   })
   <!-- vue实例的作用范围 -->
      <div id="app">
      <!-- 使用组件 -->
        <cpn2></cpn2>
      </div>

以上都是全局组件的写法
局部组件的写法为

    /* 实例 */
    new Vue({
      el:‘#app‘,
      data:{
         message:‘我是Vue‘
      },
    components:{
       ‘cpn3‘:{
        template:
        `<div>
            <h2>我是标题3</h2>
            <p>我是组件3</p>  
         </div>`
       }
      }
    })

局部组件的另一种写法

   /* 局部组件 */
     const Cpn4={
     template:`
     <div>
        <h2>我是标题4</h2>
        <p>我是组件4</p>  
     </div>
     `
   }
   /* 实例 */
     new Vue({
        el:‘#app‘,
        data:{
            message:‘我是Vue‘
        },
        components:{
           ‘cpn4‘:Cpn4
        }
    })

组件模板写法 （将template分离出去）

      <!-- cpn5的模板 -->
     <template id="CPN5">
      <div>
        {{title}}
      </div>
     </template>

     const cpn5 ={
        template:‘#CPN5‘,
        data(){
           return {
              title:‘我是cpn5‘
         }
       }
     }
   <!-- 组件中的data必须是一个函数 并且要有return -->

      /* 实例 */
      new Vue({
        el:‘#app‘,
        data:{
           message:‘我是Vue‘
        },
        components:{
             cpn5
         }
      })

vue开发中 每个vue文件就是一个组件
文件格式为

     <template>
        <div></div>
     </template>

    <script>
       export default {

      };
    </script>
    <style scoped>
    </style>

Vue 组件化

原文：https://www.cnblogs.com/larissa404/p/14825013.html