【Vue3 从入门到实战进阶式掌握完整知识体系】010-探索组件的理念：组件概述

訾博ZiBo

发布于 2025-01-06 14:11:49

1710

文章被收录于专栏：全栈开发工程师全栈开发工程师

三、探索组件的理念

1、组件概述

组件图解

组件的概念非常常见，类似于模块的概念

简单使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // Vue.createApp() 内的参数组成根组件
  const app = Vue.createApp({
    template: `
        <div>
          <!--使用子组件-->
          <hello />
          <bye />
        </div>
    `
  });

  // 注册子组件 hello
  app.component('hello',{
    template: `
        <div>hello</div>
    `
  });

  // 注册子组件 bye
  app.component('bye',{
    template: `
        <div>bye</div>
    `
  });
  const vm = app.mount('#root');
</script>

</html>

运行结果

复用组件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // Vue.createApp() 内的参数组成根组件
  const app = Vue.createApp({
    template: `
        <div>
          <!--复用组件，数据相互独立-->
          <counter />
          <counter />
          <counter />
        </div>
    `
  });

  // 注册子组件 counter
  app.component('counter',{
    data(){
      return{
        count: 1
      }
    },
    template: `
        <div @click="count += 1">{{count}}</div>
    `
  });

  // 注册子组件 bye
  app.component('bye',{
    template: `
        <div>bye</div>
    `
  });
  const vm = app.mount('#root');
</script>

</html>

运行结果

组件可嵌套使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // Vue.createApp() 内的参数组成根组件
  const app = Vue.createApp({
    template: `
        <div>
          <!--复用组件，数据相互独立-->
          <counter-parent />
          <counter />
          <counter />
          <counter />
        </div>
    `
  });

  // 注册子组件 counter-parent
  app.component('counter-parent',{
    template: `
      <counter />
    `
  });

  // 注册子组件 counter
  app.component('counter',{
    data(){
      return{
        count: 1
      }
    },
    template: `
        <div @click="count += 1">{{count}}</div>
    `
  });

  // 注册子组件 bye
  app.component('bye',{
    template: `
        <div>bye</div>
    `
  });
  const vm = app.mount('#root');
</script>

</html>

运行结果

全局组件

当前我们使用 component 进行组件注册是一种全局注册，只要定义了，处处可以使用，性能不高，但使用简单

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // Vue.createApp() 内的参数组成根组件
  const app = Vue.createApp({
    template: `
        <div>
          <!--复用组件，数据相互独立-->
          <counter-parent />
          <counter />
          <counter />
          <counter />
        </div>
    `
  });

  // 当前我们使用 component 进行组件注册是一种全局注册
  // 只要定义了，处处可以使用，性能不高，但使用简单
  // 注册子组件 counter-parent
  app.component('counter-parent',{
    template: `
      <counter />
    `
  });

  // 注册子组件 counter
  app.component('counter',{
    data(){
      return{
        count: 1
      }
    },
    template: `
        <div @click="count += 1">{{count}}</div>
    `
  });

  // 注册子组件 bye
  app.component('bye',{
    template: `
        <div>bye</div>
    `
  });
  const vm = app.mount('#root');
</script>

</html>

局部组件

习惯：定义全局组件使用 - 分割（hello-world），定义局部组件使用帕斯卡命名法（HelloWorld）定义之后，再进行注册才能用，性能高，使用起来有点复杂；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // 定义局部组件
  const counter = {
    data(){
      return{
        count: 1
      }
    },
    template: `
        <div @click="count += 1">{{count}}</div>
    `
  }
  // Vue.createApp() 内的参数组成根组件
  const app = Vue.createApp({
    // 注册组件
    components: {
      counter: counter
    },
    // ES6简写
    // components: {
    //   counter
    // },
    // 起其他名字
    // components: {
    //   cter: counter
    // },
    template: `
        <div>
          <cter />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>