为什么会有组件化设计？

• 在开发页面的时候, 希望:
  • 一个页面的每个部分单独分离成一个个小切片
  • 每个切片都有自己的视图结果，样式，逻辑
  • 每个切片形成的结构，样式，逻辑的整体 (组件)
• 组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构
• Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。

对于【组件】的一些看法

• 组件意味着独立的模块, 组件可以在任意地方任意多次地使用(复用性高)，组件也可以单独地使用(维护性高)
• 不仅如此, 组件具有可配置性 (提供一个接口, 让用户传入一些属性的, 使用的多样性也高)
• 组件之间也可以相互嵌套 (父子组件关系嵌套)
  • 嵌套的必要条件: 在组件中被嵌套的组件需要先被注册, 被嵌套的组件需要一些配置传入的属性 （props）

Vue 组件的注册

• 组件的局部注册 (components: { xxx: xxx })

  <template>
    <div>
      <Child />
    </div>
  </template>
  
  <script>
    import { defineComponent } from 'vue';
    import Child from './Child.vue';
    
    export default defineComponent({
      name: 'Father',
      components: {
        Child
      },
    });
  </script>
  
  

• 组件的全局注册 (Vue.component(app.component), Vue.mixin)

  import { createApp } from 'vue';
  
  import App from './App.vue'
  import Child from './components/Child.vue';
  
  const app = createApp(App);
  
  // 1. 使用 component 方法注册
  app.component('Child', Child);
  
  // 2. 使用 mixin 注册
  app.mixin({
    components: {
      Child
    },
  });
  
  app.mount('#app');
  
  

Vue 组件的属性传递

• 在父组件中传入组件所需要的配置, 并在子组件中使用 props 来接收这些配置

使用组件时的注意点

• props单向传递给到子组件 (props: single direction float)
• 传递不同的props, 组件的表现形式也是会不一样的
• 组件的设计方案尽量是扁平化的 (可控的数据追踪)
• 全局注册的组件过多可能会影响整个 Vue 应用的性能