- 综合排序
- 最热优先
- 最新优先
- 来自专栏BennuCTech
Vue3开发之components组件
前言 开发过程中我们会经常遇到一些复杂的页面，而这些页面大部分由一个个小部分组合起来的，而且不同页面中可能有些部分是一样的，所以我们通常会将这些部分封装成组件。 在Vue中，我们可以使用components组件(模板)来实现。 实现一个组件 一个组件其实就是一个vue文件，简单示例（header.vue）如下： <script setup></script> <template>
v-bind绑定后面双引号中是表达式，所以如果类型是： 数值：:count="3" 布尔值：:isVip="true" 数组：:array="[1,2,3]" 对象：:info="{name:'名字', 调用子组件方法 上面事件章节说的是父组件响应子组件的事件，也就是说是子组件调用父组件的方法。那么父组件如何调用子组件的方法？2.9K40编辑于 2023-09-01来自专栏网络日志实践 Vue3 组件库-基于 VuePress 开发组件文档
如果你还不了解这个系列要做什么，那你可以先阅读 【实践 Vue3 组件库-介绍一下这个系列】 的介绍，以便你对整个系列有清晰的认识。 组件库开发模板 & Vue3 组件库实践指南", }, }, bundler: viteBundler({ viteOptions: {}, vuePluginOptions 组件演示 我们需要给文档添加组件演示的功能，你也可以使用社区现有的插件如之前提到的 vmi。如果为了便于扩展也可以自己开发。接下来我们就开发一个这样的插件，先定义期望的用法和语法。 我们回到页面上看到已经渲染出来了，因为 VlibDemo 和 VlibDemo1 还不是 Vue 组件所以无法渲染。 客户端开发 客户端部分我们需要开发一个全局的 VlibDemo 组件。 [3] ?? ""; break; } i++; } // 根据缓存中存储的组件路径导入组件，组件名称和生成节点时的规则一致。
77910编辑于 2024-07-16来自专栏人生代码Vue 3 组件基础
基本实例 比如我们想开发一个可以点击加一的计算按钮，而且这个按钮是到处可以使用的，所以我们需要将他封装成一个组件的方式，这样就可以在各个地方引入，在 src/main.js 写下如下代码： import { createApp } from 'vue' import App from '. /App.vue' import router from './router' import store from '. from 'vue/dist/vue.esm-bundler.js' import App from '. 监听子组件事件 在我们开发 <blog-title> 组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号，同时让页面的其它部分保持默认的字号。
61710发布于 2020-11-03来自专栏人生代码Vue 3 组件注册
组件注册 上一节实验中，我们大概了解了一下组件的基础，这一节实验我们要深入组件注册。 组件名字 我们在注册组件的时候，我们都会给组件起一个名字，就好像我们人的名字一样。 ： import { createApp } from 'vue/dist/vue.esm-bundler.js' import App from '. /App.vue' import router from './router' import store from '. /ComponentA.vue' export default { components: { ComponentA } // ... } 接下来我们就来实现一个局部组件的注册： 我们现在在 src/views 新建一个组件 TestCom.vue： <template>
局部组件 </div1.9K20发布于 2020-11-03Vue3 组件
每个 Vue 组件都是一个独立的 Vue 实例，具有自己的模板、数据、方法和生命周期钩子，使得组件可以自包含地定义和管理自己的功能和样式。 组合性: 可以通过组合多个小组件构建复杂的界面。 响应式: 组件的数据响应式地绑定到视图，数据更新时自动更新视图。 模块化: 支持模块化开发，可以使用现代前端工具链进行构建和管理。 ') </script> 单文件组件 (.vue 文件) 使用单文件组件能够更好地组织和管理 Vue 组件，一个组件通常由三部分组成：模板、脚本和样式。 sites: [ { id: 1, title: 'Google' }, { id: 2, title: 'Runoob' }, { id: 3, == -1 } } } }) 当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
27010编辑于 2025-12-16来自专栏小鑫同学编程历险记🧩 Vue 深入组件开发☞#异步组件#
写作背景： 在前端开发中提到按需加载我们通常指的是路由配置的时候通过 webpack 提供的 import 函数来异步加载页面级别的组件，当路由被实际访问的时候才去加载对应组件的资源。 但随着页面组件内部的模块划分增加，要想保持优秀的页面加载效率我们不得不考虑页面组件内部进行按需加载，那么在 Vue 中defineAsyncComponent()方法为我们提供了这样的能力。 API 示例： 实现异步组件加载： import { defineAsyncComponent } from 'vue' const AsyncComp = defineAsyncComponent( /Foo.vue'), // 加载异步组件时使用的组件 loadingComponent: LoadingComponent, // 展示加载组件前的延迟时间，默认为 200ms delay ，默认值是：Infinity timeout: 3000 }) 按需异步组件实验案例： 演示项目结构 下面是这次实验项目的组件结构，在 App 组件中依次导入 TitleComp、BannerComp
83540编辑于 2022-12-26来自专栏网络收集vue组件化开发
4、组件化开发 认识组件化 人面对复杂问题的处理方式： 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 image.png Vue组件化思想 组件化是Vue.js中的重要思想 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。 任何的应用都会被抽象成一颗组件树。 image.png 组件化思想的应用： 有了组件化的思想，我们在之后的开发中就要充分的利用它。 尽可能的将页面拆分成一个个小的、可复用的组件。 这样让我们的代码更加方便组织和管理，并且扩展性也更强。 2.Vue.component()： 调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。 所以需要传递两个参数：1、注册组件的标签名 2、组件构造器 3.组件必须挂载在某个Vue实例下，否则它不会生效。
40820编辑于 2022-05-27来自专栏web秀VUE开发一个组件——Vue 分页组件
前言 分页组件，无非就是上一页，下一页，到具体页面。没有那么复杂。 ? 想要快速开始的，请向下看。 如果想理解源码的，可以直接跳过“快速开始”， 到“源码解读” 快速开始 安装 npm install vue-c-page -S 引入 import CPage from 'vue-h5-page' Vue.use this.pageOption.pageNo = parseInt(pageNo); console.log('当前是第' + pageNo + '页'); // do something } github地址： vue-c-page npm地址： vue-c-page 源码解读 结构部分，判断总页数小于等于6时，把所有页码全部展示，大于6的用更复杂的逻辑。 ><a class="c-inl" :class="{current: totalPage - <em>3</em> + i === pageNo }" @click="jumpTo(totalPage - <em>3</em> + i)
81710发布于 2019-09-04来自专栏Java 学习Vue 组件化开发
在前端范畴，我们可以用下面的这张图来简单地理解组件化： 这样看起来，组件化前端开发就像造一辆车，我们将轮子、发动机、悬挂、车身车门等等各部分组装成一辆车，轮子、发动机就是组件，车就是最终产品。 ，具有清晰的页面组织和高可读性的 HTML 结构代码，组件之间的关系一目了然；组件化会强迫开发人员划清各个组件的功能边界，使得开发出的功能更加健壮；所以分而治之才是组件化的意义所在，复用只是它的副作用。 1.2 组件注册 1.2.1 全局组件 使用 Vue.component("组件名称", { }) 进行组件注册，全局组件注册后，任何 Vue 实例都可以使用；组件其实也是一个 Vue 实例，因此它在定义时也有 Vue 单文件组件每个单文件组件的后缀名都是 .vue 优化了传统全局组件的一些弊端(模板缺乏高亮、没有 css 等) 每一个 Vue 单文件组件都由 template、script、style 三部分组成 进行开发需要抽取的东西就只有组件和方法了，下面我们就可以将 MyComponent.vue 组件和 Fun.js 引入到页面中。
2.1K30发布于 2020-09-28来自专栏腾讯NEXT学位VUE组件开发规范
“ Vue组件提供了丰富多样的配置可供开发者使用，不同的配置项书写顺序并不影响实际运行效果，但这缺给后期维护带来了一定的困扰，因此在蓝鲸产品中心我们规范了配置项的书写顺序。 ” 01 书写原则 组件是什么 组件需要依赖什么 组件需要什么数据 组件内部有什么数据 组件在各生命周期做了什么 组件有什么API可调用 02 规范 一 组件是什么 首先应该告诉开发者该组件是什么，因此我们要求将 name写在组件的最前方。 二 组件需要依赖什么 开发维护一个组件时，通常组件内部还依赖了其他的组件，类似js中需要将依赖import写在最上方，因此我们要求components属性紧邻name属性。 ? 三 组件需要什么数据 一个组件作为子组件与父组件通信时，父组件的数据需要通过props属性向下传递，其他诸如directives mixins等依赖依次在后。 ?
1.3K31发布于 2019-09-29来自专栏别先生Vue组件化开发
1、Vue组件化开发思想。 引述：组件化规范Web Components。 1）、我们希望尽可能多的重用代码。 2）、自定义组件的方式不太容易（html、css、js）。 3）、多次使用组件可能导致冲突。 4）、Web Components通过创建封装好功能的定制元素解决上述问题。 5）Vue部分实现了上述Web Components规范。 2、Vue组件注册。 26 // }); 27 // Vue的组件化开发，Vue的注册，下面的语法就将组件注册成功了。 27 // }); 28 // Vue的组件化开发，Vue的注册，下面的语法就将组件注册成功了。 5）、选中开发者模式。 6）、加载已解压的扩展，选择shells/chrome。 6、Vue组件，组件之间的关系，包含父子关系（祖孙关系）和兄弟关系。组件间数据交互。
3.5K20发布于 2020-04-24来自专栏全栈程序员必看请简述什么是Vue组件化开发_vue组件化开发
前言 真实项目开发过程中，我们都是使用组件化的去开发vue的项目，但是组件化的思想又是如何来的呢？ 下面就从开始讲解演变过程 演变过程1.0 一般情况下vue都是单页面开发，所以项目中只会有一个index.html文件，而且大多数时候这个html中的内容都是固定死的，之前我们都是把模板代码写在html 对象，然后在父组件中注册，最后在模板中引用该组件，同样我们打包后在页面查看的效果与之前是一样的 演变过程2.0 上面我们发现main.js中写的App这个对象代码太多了，在main.js文件中如果有多个 /vue/app' 最后在打包，页面展示的效果还是一样，但是我们把组件抽离了出来，只是这里是js文件的形式 演变过程3.0 上面我们已经将组建抽离出来了，但是template和js代码还是写在一起， /vue/App"; 此时我们打包是会报错的，因为我们项目中用到了.vue的组件，所以必须安装vue-loader和vue-template-compiler 安装命令如下： npm install -
70510编辑于 2022-09-19Vue.js3高级编程-UI组件库开发
Vue.js 3 不仅仅是一个版本迭代，它代表了现代前端工程化的一次范式转移。从源码深度解析到组件库的全栈精通，是通往未来高阶前端架构师的必经之路。 这就要求开发者必须具备“源码思维”。响应式原理的内化Vue 3 基于 Proxy 的响应式系统是其灵魂所在。 无头组件（Headless UI）与设计系统的分离未来的组件库趋势是“逻辑与样式分离”。精通 Vue 3 意味着能够构建只提供行为逻辑、不绑定任何样式的“无头组件”。 基于 Vue 3 强大的异步组件能力和动态导入机制，构建支持模块联邦（Module Federation）的分布式组件库成为可能。 Vue 3 的高级实战不仅仅是功能实现，更是对性能的极致压榨。细粒度的更新控制通过源码级的理解，开发者可以精确控制组件的更新边界，避免不必要的重渲染。
15410编辑于 2026-03-06来自专栏路过君BLOG from CSDNvite+vue3+ts开发组件库，发布npm
版本 vite 3.0.7 vue 3.2.27 所需依赖 @types/node 使用resolve解析项目路径 vite-plugin-dts 1.4.1 自动生成ts声明文件 步骤 1. defineConfig({ plugins: [vue(), dts()], build: { lib: { // 入口指向组件库入口模块 : 'Vue' } } } } }) 3. 创建组件库入口模块 ./components/index.ts import MyComponent from ". /my-component'" import {App} from "vue"; // 按需导入用 export { MyComponent } // 全局导入用 export default {
2.5K10编辑于 2022-09-23来自专栏python、mysql、go知识点积累vue3之组件
组件分类： 根组件：new vue()生成的组件 局部组件：组件名 = {}，{}内部采用的是vue语法 全局组件：Vue.component('组件名', {})，{}内部采用的是vue语法 全局组件使用范围 当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。 CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。 --<h3>{{ abc }}</h3>--> <! $emit('h3a', this.t2); } } }; new Vue({ el: '#app', data
1.3K20发布于 2019-12-20来自专栏飞鸟的专栏vue3 Teleport组件
在Vue 3中，Teleport组件是一种特殊的组件，用于在DOM中的任意位置渲染其内容。Teleport组件可以将其子组件渲染到指定的目标容器中，而不受组件层次结构的限制。 Teleport组件的使用基本用法在Vue 3中，你可以使用Teleport组件来将其子组件渲染到指定的目标容器中。 多个Teleport组件在一个Vue 3应用程序中，你可以使用多个Teleport组件，并将它们渲染到不同的目标容器中。每个Teleport组件都可以使用不同的目标容器选择器。 Teleport组件的限制需要注意的是，Teleport组件有一些限制，因为它需要在Vue应用程序的根组件之外进行渲染。 可以在组件的任意位置使用Teleport组件可以在Vue应用程序的任何组件中使用，包括根组件和子组件。这使得你可以在不同的组件中使用Teleport组件来实现灵活的渲染布局。
1.2K30编辑于 2023-05-22来自专栏前端数据可视化Vue3 递归组件
---- 本文简介 点赞 + 关注 + 收藏 = 学会了 在日常 Vue 项目中，大概率会用组件库辅助开发，所以 递归组件 的出镜率可能不会非常高。但这并不代表 递归组件 不重要。 本文用10分钟左右的时间让你掌握 递归组件 的用法。 在此之前，你必须掌握：html + css + js + Vue3 基础用法，至少需要知道 Vue 组件 是什么。 什么是递归组件？ 看到这里，我相信大家是知道 Vue组件 是什么。 我先把 《Vue3 递归组件 文档》 放在这。 其实 递归组件 就是把 “递归” 和 “组件” 结合起来。 3、获取导航数据 在真实项目中，左侧导航可能是从后端获取的。 但本文的目的是学习递归组件，所以就直接在前端模拟了一份 “请求回来的数据”。 我把 “请求数据” 的操作放在 App.vue 。 讲到 props 我就顺便提一下：《Vue3 过10种组件通讯方式》 App.vue <template>
<RootNav :list="navList" /> </div1.2K20编辑于 2022-04-17vue3 异步组件
什么是异步组件在 Vue 3 中，异步组件指的是一种在需要时才加载和渲染的组件。这意味着组件不会在应用启动时立即加载，而是在真正需要显示该组件的时候，才会动态地从服务器或文件系统中加载它。 defineAsyncComponentdefineAsyncComponent 是 Vue 3中用于定义异步组件的一个函数，它允许开发者以声明式的方式定义一个在需要时才加载的组件。 这个函数是 Vue 官方提供的，它简化了异步组件的使用过程，并提供了丰富的配置选项。 默认情况下，如果没有提供，Vue 会显示一个默认的加载指示器。errorComponent: 当异步组件加载失败时显示的组件。默认情况下，如果没有提供，Vue 会显示一个错误信息。 /child.vue')})</script>子组件 child.vue<template>
{{ content }}</template><script setup56610编辑于 2024-08-01来自专栏狮乐园高级 Vue 组件模式 (3)
03 使用 mixin 来增强 Vue 组件 目标 之前一篇文章中，我们虽然将 toggle 组件划分为了 toggle-button、toggle-on 和 toggle-off 三个子组件，且一切运行良好 ，但是这里面其实是存在一些问题的： toggle 组件的内部状态和方法只能和这三个子组件共享，我们期望第三方的组件也可以共享这些状态和方法 inject 的注入逻辑我们重复编写了三次，如果可以的话，我们更希望只声明一次 ，该模式能够提高 react 组件的复用程度和灵活性。 在 vue 中，我们是否也有一些手段或特性来提高组件的复用程度和灵活性呢？答案当然是有的，那就是 mixin。 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-3 总结 mixin 作为一种分发 Vue 组件中可复用功能的非常灵活的方式，可以在很多场景下大展身手
64530发布于 2020-01-21来自专栏ops技术分享Vue3 组件（下）
Prop prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。 父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"： Prop 实例
<site-name title="Google sites: [ { id: 1, title: 'Google' }, { id: 2, title: 'Runoob' }, { id: <em>3</em>, title: 'Taobao' } ] } } } const app = <em>Vue</em>.createApp(Site) app.component('site-info', == -1 } } } }) 当 prop 验证失败的时候，(<em>开发</em>环境构建版本的) <em>Vue</em> 将会产生一个控制台的警告。48930发布于 2021-07-28腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号