vue自定义组件基础，全局组件和局部组件怎么写？

Vue 组件是 Vue.js 框架中可复用的、自包含的模块。每个组件都包含了自己的HTML模板、CSS样式和JavaScript逻辑，能够方便地进行组合、扩展和重用，使得整个应用程序更加模块化和易于维护。

Vue 组件的常见写法包括以下几种：

1. 定义全局组件

  template: '<div>这是一个全局组件</div>'
})
//my-component是自定义的组件名
//后续使用：<my-component></my-component>

2. 定义局部组件

//配置局部组件
var myComponent = {
  template: '<div>这是一个局部组件</div>'
}

//哪里需要用，就要在components注册一下
new Vue({
  components: {
      //属性是自定义的组件名
      //后面是上面配置的局部组件
    'my-component': myComponent
  }
})

初识组件

全局组件

使用简单方便，

但是无论使用与否都会被打包进项目，会造成冗余。

同时，层级关系不明显。

局部组件

解决了上述缺点，但是使用起来比较复杂

任何组件要想使用，必须在components里面注册

另外，组件b中使用了组件a的话，a必须写在b前面

	冗余？	简单	层级明显
全局组件	√	√
局部组件			√

<script>
    //配置局部组件，其实就在写一些对象
    let compA = {
      data: function () {
        return {
          str: "我是组件A",
        };
      },
      template: `<div class="compA">
        <p>{{str}}</p>
      </div>`,
      components: {},
    };
    
    let compB = {
      data: function () {
        return {
          str: "我是组件B",
        };
      },
      template: `<div class="compB">
        <p>{{str}}</p>
        <comp-a></comp-a>
      </div>`,
      components: {
        "comp-a": compA,
      },
    };

    let compC = {
      data: function () {
        return {
          str: "我是组件C",
        };
      },
      template: `<div class="compC">
        <p>{{str}}</p>
        <comp-b></comp-b>
      </div>`,
      components: {
        "comp-b": compB,
      },
    };