vue中的组件化实现和使用

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第18天，点击查看活动详情

前言

组件化是vue中的一种重要思想，那什么是组件化呢？如果将一个页面所有的处理罗技放在一起，处理起来就会变得非常复杂，也不利于以后的管理和扩展，但是将一个页面拆分成一个个小的功能模块，每个功能模块都有自己部分独立的功能，那么这个页面的管理和维护就变得容易许多了，封装好的功能模块还可以直接复制拿去别的项目中使用

组件使用的步骤

组件使用的步骤分为三步:

• 1.创建组件，使用Vue.extend()方法创建
• 2.注册组件，调用Vue.components()方法注册
• 3.使用组件，只能在Vue实例范围内使用

创建组件构造器使用Vue.extend()方法创建，需要传入一个对象作为参数，对象里的template属性就存放着组件的内容

const cpn=Vue.extend({
    template:`
        <div>
            <h1>今天吃kfc</h1>
        </div>
    `
})

然后调用Vue.components()方法注册，传入两个参数，一个是组件的名字，另一个是组件构造器

Vue.component('c-cpn',cpn)

最后在html里使用组件，标签名就是组件注册时的名字，如果需要使用多个组件就复制多个，大大减少了重复的代码

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

全局组件和局部组件

在注册组件的时候可以分为全局组件和局部组件，局部组件只能在当前的vue实例里使用，而全局组件可以在多个vue实例里使用

创建多个vue实例试试，可以看到注册的可以在多个vue实例中使用

<div id="app"> //实例1
    <c-cpn></c-cpn>
</div>

<div id="app2"> //实例2
    <c-cpn></c-cpn>
</div>

const cpn=Vue.extend({
  template:`
  <div>
    <h1>今天吃kfc</h1>
  </div>`
})
//全局组件，可以在多个vue实例下面使用
Vue.component('c-cpn',cpn)

const app=new Vue({ //创建实例1
  el:'#app',
  data:{
  }
})
const app2=new Vue({ //创建实例2
  el:'#app2',
  data:{
  }
})

如果我们不希望组件在其他实例中使用，可以采用注册局部组件的方式，在vue的实例里使用components属性注册，这样其它实例就使用不了这个组件了

const app=new Vue({
  el:'#app',
  data:{
  },
  components:{
    //注册组件的名字:组件实例构造器的名字 如果名字一样可以简写为一个名字就行了，例如cpn:cpn简写为cpn
    'c-cpn':cpn
  }
})

父组件和子组件

当我们注册封装了一个组件，这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件