Vue 组件化

Posted 2021-05-29 Larissa

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>
          {{message}}
      </div>
      </template>

      const Cpn5={
        template=\'#cpn5\',
        data(){
           return {
              message:\'我是cpn5\'
           }
        }
      }
      /* 实例 */
      new Vue({
         el:\'#app\',
         data:{
            message:\'我是Vue\'
         },
        components:{
             cpn5
        }
     })