Vue 组件简介

什么是组件

在 Vue 中，组件是可复用的 Vue 实例，可接受向外部传递的参数(props)、被动对外部事件的触发和主动触发外部事件($emit)。组件从概念上看就像是 Vue 实例，不同之处在于组件可以接受的参数更加灵活且有一定规律。

在 Vue 中，一个组件本质上就是一个拥有预定义选项的 Vue 实例，并且可以通过Vue.component来注册一个新的组件。

组件的优点

组件能够带来的好处有很多，这里列举其中几个：

提高代码重用率，避免重复的代码编写和维护；
不同的功能可以分为一个个独立的组件，使得整个项目结构更加清晰明了；
可以个性化地定制组件外观和功能，组件内部实现对外部透明。

组件的使用

组件的使用非常简单，只需在 Vue 实例中注册组件并在其中使用即可。

声明式

<template>
  <div>
    <my-component :message="message"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';
export default {
  components: {
    'my-component': MyComponent
  },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

编程式

<template>
  <div>
    <div v-if="show">
      <dynamic-component :component-name="component.name" :component-props="component.props"></dynamic-component>
    </div>
    <button @click="toggleShow">Toggle</button>
  </div>
</template>

<script>
import DynamicComponent from './DynamicComponent.vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
  components: {
    DynamicComponent,
    ComponentA,
    ComponentB
  },
  data() {
    return {
      show: false,
      component: null
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
      if (this.show) {
        this.component = {
          name: 'ComponentA',
          props: {
            message: 'Hello ComponentA!'
          }
        };
      } else {
        this.component = {
          name: 'ComponentB',
          props: {
            message: 'Hello ComponentB!'
          }
        };
      }
    }
  }
}
</script>