组件的使用

组件化思想

• 如果我们将一个页面中的所有处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理和扩展。但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么整个页面的管理和维护就会变得非常容易了

组件的定义

• 组件是一个单独功能模块的封装，在这个模块中，它有自己的html代码、css代码，也有自己的js代码。一个项目，正是由许多大大小的组件组成，一个页面，需要什么功能，就拿什么组件，不仅方便又是结构非常的清晰

组件的基本使用

• 组件的使用通常分为三个步骤

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

①创建组件构造器

• 调用Vue.extend()方法创建组件构造器

  • 格式：Vue.extend( options )
  • 参数说明：options是包含组件选项的对象。template代表自定义组件模板，该模板接收一段html代码

  const cpnContructor = Vue.extend({
      template:
          `<div>
              <h2>标题1</h2>
              <p>段落1</p>
              <p>段落2</p>
          </div>`
  });
  

②注册组件

• 调用Vue.component()方法注册组件

  • 格式：Vue.component('my-cpn', cpnContructor)
  • 参数说明：该组件接收两个参数：'my-cpn' 要注册组件的标签名，cpnContructor 组件构造器对象
  • 注意项：通过Vue.component()方法注册的组件为全局组件

  Vue.component('my-cpn', cpnContructor);
  

③使用组件

• 在Vue实例的作用范围内使用组件

  <div id="app">
      <my-cpn></my-cpn>
      <my-cpn></my-cpn>
  </div>
  // <my-cpn></my-cpn> 错误
  

  const app = new Vue({
      el: '#app',
  

• 效果图

全局组件与局部组件

• 当我们通过Vue.component注册的组件即为全局组件，这意味着该组件在整个Vue实例中都可以使用

• 而如果我们是在某个实例下注册的组件，这个组件就是局部组件。局部组件只能在该实例下使用

const app = new Vue({
    el: '#app',
    components: {
        //my-cpn:组件标签名，cpnContructor:组件构造器对象
        my-cpn: cpnContructor
    }
})

注册组件的语法糖

• 注册组件的语法糖主要是省略了调用Vue.extend()的步骤，而是直接使用一个对象代替

//全局组件的语法糖
Vue.component('my-cpn', {
    template: `<div>
        <h2>标题1</h2>
        <p>段落1</p>
        <p>段落2</p>
    </div>`
});

//局部组件的语法糖
const app = new Vue({
    el: '#app',
    components: {
        cpn2: {
            template: `<div>
                <h2>标题1</h2>
                <p>段落1</p>
                <p>段落2</p>
            </div>`
        }
    }
})

组件模板分离

• 在JavaScript代码中写上大量html代码一方面看着不舒服，另一方面会使结构不清晰，因此将html代码抽离出来非常有必要
• 使用template标签，同时需要为该标签添加id或class作为标识，将template中的html代码全部写入该标签中

<template id='cpn2'>
    <div>
        <h2>标题2</h2>
        <p>段落3</p>
        <p>段落4</p>
        <cpn1></cpn1>
    </div>
</template>

const app = new Vue({
    el: '#app',
    components: {
        cpn2: {
            //引用需要的html代码
            template: '#cpn2'
        }
    }
})

[优点]：如何一来，代码就会看起来非常的清晰

组件的组成

• 一个完整的组件应由这三部分组成
  • 界面展示代码的template，这是你写html代码的位置
  • 业务实现代码的script，这是你写vue代码的位置
  • 界面布局的style，这是你写css代码的位置
• 整个组件通过export default导出去，使得其他任何组件都可以使用该组件

<template>
  <div class="bottom-bar">
  </div>
</template>

<script>
  export default {
    name: 'CartBottomBar',
    components: {
      // 注册了一个组件
      CheckButton
    },
    data() {
      return {
		message:'你好'
      }
    },
    computed: {},
    methods: {}
  }
</script>

<style scoped>
  .bottom-bar {
    height: 49px;
    width: 49px;
  }
</style>

拿到一个组件对象

• 当我们想明确拿到一个特定的组件时，推荐使用$refs
  • $refs和ref指令通常是一起使用的
  • 首先，我们通过ref给某一个子组件绑定一个特定的ID
  • 其次，通过this.$refs.ID就可以访问到该组件了

<cpn></cpn>
<cpn ref="aa"></cpn>
<cpn></cpn>

btnClick() {
    // 点击按钮输出绑定了ref='aa'属性的组件对象的name值
    console.log(this.$refs.aa.name);

• 所有组件都有一个属性$el：通过该属性可以获取组件中的元素

// 组件没有offsetTop属性，但是元素有，组件通过$el就可以获取到组件元素的offsetTop属性
this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop

组件中的data必须是一个函数

• 组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响