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

最新推荐文章于 2024-05-06 18:22:56 发布

訾博ZiBo

最新推荐文章于 2024-05-06 18:22:56 发布

阅读量273

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/qq_29689343/article/details/118119204

版权

Vue.js 专栏收录该内容

110 篇文章 21 订阅

订阅专栏

本文详细介绍了Vue.js中组件的概念和使用，包括组件的简单创建、复用以及组件的嵌套。通过实例展示了如何全局注册和局部注册组件，探讨了两者的性能和适用场景。此外，还讨论了组件的独立状态和数据传递，帮助读者深入理解Vue.js的组件化思想。

摘要由CSDN通过智能技术生成

三、探索组件的理念

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>