带你复习vue中那些关于组件的基础知识

一，什么是组件：

1， 扩展HTML元素，封装可重用的代码

如下图，左侧是一个页面 被拆分成小的区块，每个区块对应一个组件，组件可以嵌套，最终组合成完成页面

 

.png

2， 组件设计原则

页面上每个独立的可视/可交互区域视为一个组件
每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护
页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面

如下示例：把组件拆分成根组件和两个子组件：

 

   const app = Vue.createApp({
      template:`<div>
                  <moduleone />
                  <moduletwo />
                </div>`
   })

   app.component('moduleone',{
        template:`<div>moduleone</div>`
   });

   app.component('moduletwo',{
        template:`<div>moduletwo</div>`
   });
   const vm = app.mount('#contentMain');

3， 组件还具备复用性

如下示例：有三个组件，其中一个组件发生变化不会影响到其他组件，里面的数据属于组件独享

 

    const app = Vue.createApp({

        template: `<div>
                  <modulecounter />
                  <modulecounter />
                  <modulecounter />
                </div>`
    })

    app.component('modulecounter', {
        data() {
            return {
                count: 1
            }
        },
        template: `<div @click ="count += 1">{
  {count}}</div>`
    });
    
    const vm = app.mount('#contentMain');

二，局部组件和全局组件

1，全局组件

由于app.component 定义的组件为全局组件，父组件及其他子组件都可使用
示例如下：

 

    const app = Vue.createApp({

        template: `<div>
                  <modulecounter-parent />
                  <modulecounter />
                </div>`
    })

    app.component('modulecounter-parent', {
        template: `<modulecounter />`
    });
    app.component('modulecounter', {
        data() {
            return {
                count: 1
            }
        },
        template: `<div @click ="count += 1">{
  {count}}</div>`
    });
    const vm = app.mount('#contentMain');

全局组件，定义好后，即使不用 也是一直挂载在 vue实例上的，对性能有一定影响，但是可随时使用；

2，局部组件

局部组件定义方式如下示例：

 

    const CounterChild = {
        data() {
            return {
                count: 1
            }
        },
        template: `<div @click ="count += 1">{
  {count}}</div>`
    }

    const app = Vue.createApp({
        components: {
            'counter-child': CounterChild
        },
        template: `<div>
                  <counter-child />
                </div>`
    })
    
    const vm = app.mount('#contentMain');

局部组件 定义一个常量，通过 components 声明，声明后 可在模板内使用，性能较高，使用起来麻烦，局部组件定义尽量用驼峰式命名，使用时，要做一个名字和组件间的映射；

三，组件间传值及通信

1ÿ