Vue的组件化

组件的注册方式1：传统方式

• 步骤：

1. 创建组件构造器：Vue.extend({template:``})方法创建组件构造器，传入一个template模板
2. 注册组件：Vue.component(p1,p2)方法注册组件，p1注册组件的标签名、p2组件构造器。
3. 使用组件：Vue实例中使用

例如：

<div id="app">
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<script>
  // 1.创建组件构造器对象
  const cpnC = Vue.extend({
    template:`
    <div>
      <h2>component</h2>
      <p>我想故乡的梅花和你，很久了。梅寒霜冷，一顾倾城。愿你再遇故人，雁过何以留声。</p>
      <p>找到那个人，然后做一个了结。星辰倾斜，月光与血。愿你执念不灭，回忆亲手终结。</p>
    </div>`
  })
  //2.注册组件：传入两个参数（p1,p2）。p1为自定义组件组件标签，p2为创建的组件构造器对象
  //2-1全局组件：可在多个Vue实例中使用
  Vue.component('my-cpn',cpnC)
  //2-2局部组件：在Vue实例内部添加属性component:{}

const app = new Vue({
  el:'#app',
  data:{
    message:'Vue'
  },
  components:{//局部组件，只能在该Vue实例中使用
    //cpn:使用组件时的标签名，cpnC:组件构造器对象
    cpn:cpnC
  }
})
</script>

运行结果如下： 

组件的注册方式2：语法糖

Vue.component('cpn1',{
    template:`
    <div>
      <h2>component1</h2>
      <p>我想故乡的梅花和你，很久了。梅寒霜冷，一顾倾城。愿你再遇故人，雁过何以留声。</p>
    </div>`,
  })

//Vue实例中
conponments:{
cpn1:{
    template:`
    <div>
      <h2>component1</h2>
      <p>我想故乡的梅花和你，很久了。梅寒霜冷，一顾倾城。愿你再遇故人，雁过何以留声。</p>
    </div>`,
  }
}

Vue组件的抽离：

 

  <template id="cpn">
      <div>
        <h2>component1</h2>
        <p>我想故乡的梅花和你，很久了。梅寒霜冷，一顾倾城。愿你再遇故人，雁过何以留声。</p>
      </div>
    </template>
  
  <div id="app">
    <cpn></cpn>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.component('cpn',{
      template:'#cpn'
    })
  const app = new Vue({
    el:'#app',
    data:{
      message:'Vue'
    }
  })
  </script>