3-1.vue的组件component：组件的基本使用标题

vue组件的作用

组件的含义其实就是对一些功能进行封装。vue的项目开发都是以组件化的形式去开发的，一个项目一般都是划分成多个组件，然后拼接而成的。

1.代码展示(最原始的实现方式，不建议这样写)

<body>
  <div id='app'>
    <!-- 3.使用组件 -->
    <cpn></cpn>
  </div>

  <template id='cpn'>
    <div>
      这是组件的数据
    </div>
  </template>

  <script>
    // 1.创建组件实例
    const component1 = Vue.extend({
      template: '#cpn'
    });

    //2。注册组件
    Vue.component('cpn',component1);


    const app = new Vue({
      el: '#app',
      data: {
        count: 10
      }
    });
  </script>

</body>

2.过程分解

在这里插入图片描述

全局组件和局部组件

全局组件可以在任何vue的实例里面使用，而局部组件组能在其注册的vue实例里面使用

1.代码展示

<body>
  <div id='app'>
    <!-- 全局组件展示 -->
    <cpn1></cpn1>
    <!-- 局部组件展示 -->
    <cpn2></cpn2>
  </div>

  <template id='cpn1'>
    <div>
      这是全局组件
    </div>
  </template>

  <template id='cpn2'>
    <div>
      这是局部组件
    </div>
  </template>

  <script>
    // 创建组件实例1
    const component1 = Vue.extend({
      template: '#cpn1'
    });
    // 创建组件实例2
    const component2 = Vue.extend({
      template: '#cpn2'
    });

    //全局注册
    Vue.component('cpn1',component1);


    const app = new Vue({
      el: '#app',
      data: {
        count: 10
      },
      // 局部注册
      components: {
        cpn2: component2
      }
    });
  </script>

</body>

2.过程分解

在这里插入图片描述

局部组件最简写的方式（推荐使用）

<body>
  <div id='app'>
    <cpn></cpn>
  </div>

  <template id='cpn'>
    <div>
      这是组件
    </div>
  </template>

  <script>

    // 一步到位  
    const cpn = {
      template: "#cpn"
    }

    const app = new Vue({
      el: '#app',
      data: {
        count: 10
      },
      // 局部注册
      components: {
        cpn
      }
    });
  </script>

</body>
版权声明：本文为weixin_45660035原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_45660035/article/details/111403323