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

最新推荐文章于 2024-05-28 11:13:26 发布

堵车了

最新推荐文章于 2024-05-28 11:13:26 发布

阅读量2.4k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45660035/article/details/111403323

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

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>

堵车了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3-1.vue的组件component：组件的基本使用

3-1.vue的组件component：组件的基本使用标题vue组件的作用组件的含义其实就是对一些功能进行封装。vue的项目开发都是以组件化的形式去开发的，一个项目一般都是划分成多个组件，然后拼接而成的。1.代码展示(最原始的实现方式，不建议这样写)<body> <div id='app'>  <cpn></cpn> </div> <template id='cp
复制链接

扫一扫