十日谈 :Vue 中的组件化开发

欢迎阅读我的Vue学习日记

什么是组件化

组件化是一种高效的处理复杂应用系统，更好的明确功能模块作用的方式。
讲一个页面拆分为一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就会变得非常容易了。

Vue的组件化思想

1.他提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
2.任何的应用都会被抽象成一棵组件树。

注册组件的步骤

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

组件化的基本使用

1.创建组件构造器对象

  const cpnC = Vue.extend({
    template:`
    <div>
    <h2>我是标题</h2>
    <p>我是内容</p>
    </div>`
  })

注意这里使用``（Tab键上方按键）代替 ‘’，因为前者可以换行

2.注册组件

Vue.component('cpn',cpnC)

第一个参数是你要使用这个模块时的名字即组件标签名，第二个参数是这个模块声明时的组件构造器

全局组件和局部组件

1.全局组件：
上一章构建组件的方式就是构建的全局组件
全局组件意味着可以在多个Vue实例下面使用

2.局部组件：
当你在某个Vue实例下面注册的时候，注册的就是局部组件

 const app = new Vue({
    el:'#app',
    data:{
      message:'Hello Vue'
    },
    components:{
      cpn:cpnC
    }
  })

cpn是组件标签名，cpnC是组件构造器

父组件与子组件

<script>
  const cpnC1 = Vue.extend({
    template:`
    <div>
      <h2>我是标题</h2>
      <p>我是内容</p>
    </div>
    `
  })
  const cpnC2 = Vue.extend({
    template:`
    <div>
      <h2>我是标题</h2>
      <p>我是内容</p>
      <cpn1></cpn1>
    </div>
    `,
    components:{
      cpn1:cpnC1
    }
  })

  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue'
    },
    components: {
      cpn2:cpnC2
    }
  })
</script>

组件构造器cpn1放在组件构造器cpn2里面注册，而组件cpn2放在vue实例里面进行了注册，这样可以保证两个都使用过了。
在这个过程中：
cpn2作为父组件，cpn2作为子组件
vue实例也可以当做一个最顶层的组件

父子组件的错误用法：
1.因为当子组件注册到父组件的components时，Vue会编译好父组件的模块。
2.该模块的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件中的内容）
3.< child-cpn >这种用法是只能在父组件中被识别的。
4.类似这种用法，< child-cpn >是会被浏览器忽略的。

注册组件的语法糖

  Vue.component('cpn1',{
    template:`
      <div>
       <h2>我是标题2</h2>
       <p>我是内容2</p>
    </div>
    `
  })

无需单独写const cpnC = Vue.extend()
直接在注册组件中声明组件

局部组件：

const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue'
      },
      components:{
      'cpn2':{
        template: `
        <div>
          <h>我是cpn2</h>
        </div>
        `
      }
      }
  })

组件模板的抽离写法

因为在template里面写html非常麻烦，所以这里介绍两种写法
第一种：
使用的关键语句是这样的：<script type="text/x-template" id="cpn">

<div id="app">
  <cpn></cpn>
</div>
<script type="text/x-template" id="cpn">
  <div>
    <h2>我是标题</h2>
    <p>我是内容</p>
  </div>
</script>
<script src="../js/vue.js"></script>
<script>
  Vue.component('cpn',{
    template:'#cpn'
  })

  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue'
    }
  })
</script>

第二种：
也可以使用template标签来写：

<template id="cpn">
  <div>
    <h2>我是template标签</h2>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  Vue.component('cpn',{
    template:'#cpn'
  })

为什么组件data必须是函数

组件是一个单独功能的模块：
这个模块有属于自己的HTML模板，也应该有属于自己的数据data
Vue组件应该有自己保存数据的地方：
1.组件对象也有一个data属性
2.知识这个data属性必须是一个函数
3.而且这个函数返回一个对象，对象内部保存着数据

<template id="cpn">
  <div>
    <h2>我是template标签</h2>
    <p>{{title}}</p>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  Vue.component('cpn',{
    template:'#cpn',
    data(){
      return{
        title:'数据显示出来了'
      }
    }
  })

  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue'
    }
  })
</script>