Vue3-组件化

简介: Vue3-组件化

组件化


什么是组件化?理解组件化


组件允许我们将 UI 划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构:

这和我们嵌套 HTML 元素的方式类似,Vue 实现了自己的组件模型,使我们可以在每个组件内封装自定义内容与逻辑。


如何封装一个vue组件


目标:理解一般思路即可

一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。

  • 先构建组件的模板
  • 定义组件
  • 注册组件
  • 使用组件


vue3组件注册和使用

学习:app.component()、components选项、template选项

组件注册有两种方式:全局注册和局部注册。


全局注册组件

我们可以使用 Vue 应用实例的 app.component() 方法,让组件在当前 Vue 应用中全局可用

import { createApp } from 'vue'
const app = createApp({})
app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)


app.component() 方法可以被链式调用:

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)


全局注册的组件可以在此应用的任意组件的模板中使用

<!-- 这在当前应用的任意组件中都可用 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>


所有的子组件也可以使用全局注册的组件,这意味着这三个组件也都可以在彼此内部使用

完整案例:05_component/01_com.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>组件</title>
</head>
<body>
  <div id="app">
    <!-- 4.使用组件
      html 页面中,只能使用 短横线方式
    -->
    <my-root></my-root>
    <!-- <MyRoot></MyRoot> -->
  </div>
</body>
<!-- 1.定义组件模版 -->
<template id="root">
  <div style="width: 100%;height: 600px; background-color: #ccc;"></div>
</template>
<script src="../lib/vue.global.js"></script>
<script>
  // 2.定义组件
  const Root = {
    template: '#root'
  }
  const app = Vue.createApp({
  })
  // 3.注册组件
  // 组件名字 两种方式 驼峰式 MyRoot  短横线连接 my-root
  app.component('MyRoot', Root)
  app.mount('#app')
</script>
</html>


以上案例使用 PascalCase 作为组件名的注册格式,这是因为:


  1. 1、PascalCase 是合法的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件都很容易,同时 IDE 也能提供较好的自动补全。
  2. 2、<PascalCase /> 在模板中更明显地表明了这是一个 Vue 组件,而不是原生 HTML 元素。同时也能够将 Vue 组件和自定义元素 (web components) 区分开来

在单文件组件和内联字符串模板中,我们都推荐这样做。但是,PascalCase 的标签名在 DOM 模板(html文件)中是不可用的

为了方便,Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent 为名注册的组件,在模板中可以通过 <MyComponent> <my-component> 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。

目录
相关文章
|
1天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
1天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
1天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
5天前
|
JavaScript Java API
vue3知识点:setup
vue3知识点:setup
18 5
|
5天前
|
资源调度 JavaScript 前端开发
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
14 5
|
5天前
|
API
vue3知识点:reactive对比ref
vue3知识点:reactive对比ref
15 3
|
5天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
15 2
|
5天前
|
JavaScript API
Vue3快速上手简介
Vue3快速上手简介
17 2
|
5天前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
12 1
|
5天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
11 0