- 综合排序
- 最热优先
- 最新优先
- 来自专栏狮乐园
高级 Vue 组件模式 (8)
虽然父组件拥有了改变 toggle 组件内部状态的途径，但是如果进一步思考的话，父组件并没有绝对的控制权。在一些业务场景，我们期望父组件对于子组件的状态，拥有绝对的控制权。 实现 判定组件是否受控 由于 toggle 组件为一个智能组件，我们需要提供一个判定它是否受控的方式。 很简单，由目标中的第一点可知，当父组件传入了 on 属性后，toggle 处于被控制的状态，否则则没有，于是可以利用 Vue 组件的 computed 特性，声明一个 isOnControlled 计算属性 false（开关状态为关）作为参数传入触发事件，这将告知父组件，当前组件的下一个状态为关，至于父组件是否同意将其状态更改为关则有父组件决定。 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-8 总结 关于 Controlled Component 和 Uncontrolled Component
88610发布于 2020-01-21 - 来自专栏小鑫同学编程历险记
🧩 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 组件化思想的应用： 有了组件化的思想，我们在之后的开发中就要充分的利用它。 尽可能的将页面拆分成一个个小的、可复用的组件。 这样让我们的代码更加方便组织和管理，并且扩展性也更强。 1.Vue.extend()： 调用Vue.extend()创建的是一个组件构造器。 通常在创建组件构造器时，传入template代表我们自定义组件的模板。 2.Vue.component()： 调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
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的用更复杂的逻辑。
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）。 " type="text/javascript"></script> 21 <script type="text/javascript"> 22 // 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 DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <title>Title</title> </head> <body> 对象，然后在父组件中注册，最后在模板中引用该组件，同样我们打包后在页面查看的效果与之前是一样的 演变过程2.0 上面我们发现main.js中写的App这个对象代码太多了，在main.js文件中如果有多个 /vue/App"; 此时我们打包是会报错的，因为我们项目中用到了.vue的组件，所以必须安装vue-loader和vue-template-compiler 安装命令如下： npm install -
70510编辑于 2022-09-19 - 来自专栏前端文章小tips
Vue 8种组件通信方式
vue是数据驱动视图更新的框架，所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？ 非父子组件之间通信(兄弟组件、隔代关系组件等) 本文会介绍组件间通信的8种方式如下图目录所示:并介绍在不同的场景下如何选择有效方式实现的组件间通信方式，希望可以帮助小伙伴们更好理解组件间的通信。 Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上 2. 使用props绑定来进行一级一级的信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一级级往上传递 使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低
1.2K40发布于 2021-11-23 - 来自专栏CSDN迁移
Vue进阶——组件化开发
Vue进阶——组件化开发 一、什么是组件化 二、组件 1. 写法 2. 通信 3. 父子组件的访问方式 三、Slot 插槽（组件扩展性） 四、模板化概念 一、什么是组件化 类似微服务的软件架构，在前端开发中，一个页面的实现往往十分复杂，我们可以将一个页面划分为多个块，每个块负责相应的功能 这样的前端开发方式正是组件化开发，一个页面是一个大的组件树，其下又划分有很多小的组件。这样一来，不仅降低了一次开发的难度，而且避免了重复造轮子，组件可以灵活的嵌入其他的Vue项目中进行使用。 写法 注册组件的步骤 创建组件的构造器：Vue.extend() 注册组件：全局/局部 使用组件：Vue实例范围内 注册组件 全局：可以在多个Vue实例下使用，Vue.conponent 语法糖 V2.0之后的组件注册方式封装了Vue.extend()方法，使用对象代替，简化步骤。
1.4K20编辑于 2022-10-25 - 来自专栏娜姐聊前端
Vue组件开发-高级玩法
在文章《Vue组件开发三板斧：prop、event、slot》中聊了常用的组件开发常用API和一些采坑心得，这里，再说说一些可能不太常用的高级玩法，可参考https://cn.vuejs.org/v2/ 组件挂载 方式一：components属性 我们常用的创建组件方式就是文件声明，例如，在一个假设的 headTop.js 或 headTop.vue 文件中定义组件。 方式二：$mount 还有两种方式可以创建组件： new Vue() Vue.extend() 用new Vue()创建一个 Vue 实例时，都会有一个选项 el，可以用来指定实例的根节点。 ) Vue.extend 是基于 Vue 构造器，创建一个“子类”，它的参数跟 new Vue 的基本一样，但是data写法和组件类似，需要返回一个函数。 比如，在app.vue中注入根组件。
2.7K30发布于 2020-09-22 - 来自专栏ljw
Vue.js组件开发
组件化：视图被分割成可复用的组件，每个组件有自己的状态和生命周期。 指令：Vue.js 提供了一系列内置指令（如 v-bind、v-if、v-for 等），用来处理 DOM 的操作。 DOCTYPE html> <html> <head> <meta charset="utf-<em>8</em>"> <title>Vue.js 示例</title> <script src="https: computed: { reversedMessage() { return this.message.split('').reverse().join(''); } } 3.3 <em>组件</em>化<em>开发</em> <em>组件</em>是 <em>Vue</em>.js 的核心概念，<em>组件</em>可以包含自己的模板、数据和方法。 <em>Vue</em>.use(VueRouter); // 使用 <em>Vue</em> Router 六、<em>Vue</em> 3.x 的变化 <em>Vue</em> 3 带来了很多新的特性和优化： Composition API：允许<em>开发</em>者以函数的形式组织代码
35110编辑于 2025-05-31 - 来自专栏京东技术
Vue拖拽组件开发实例
vue是一套用于构建用户界面的渐进式框架。可以用他来封装单文件组件来开发更为复杂的单页应用。 本文主要是通过封装一个拖拽组件的例子，来分析Vue组件化相关知识。 为什么选择Vue? 加之，Vue本身具有以下主要特性： 使用虚拟DOM； 轻量级框架； 高效的数据绑定； 灵活的组件系统； 完整的开发生态链。 这就是我们为什么选择Vue框架的一些原因。 为什么要封装成一个Vue组件？ 组件内封装的样式<style lang="scss" scoped></style> 开发Vue移动拖拽组件为例 拖拽原理 手指在移动的过程中，实时改变元素的位置即top和left值，使元素随着手指的移动而移动 这就有必要提一下Vue的最大特性：数据驱动。所谓的数据驱动就是当数据发生变化时，通过修改数据状态，使用户界面发生相应的改变，开发者不需要手动的去修改DOM。 小结 本文从Vue拖拽组件开发为例，剖析Vue组件的结构、开发思路、Vue的数据驱动等，对Vue组件化的原理，进行了更深入的理解。 并将Vue实现拖拽的方案提供给大家学习研究。 P.S.
4.9K130发布于 2018-04-10 - 来自专栏花猪的学习记录
Vue学习-组件化开发
前言 本文将介绍Vue的组件化开发。 将一个页面拆分成一个个小的功能块，每个功能块完成自己独立的功能，这样在之后的页面维护和管理就会方便许多。 ---- 组件化开发 基本使用 组件的使用可以分为以下三个步骤： 创建组件构造器（Vue.extend()方法） 注册组件（Vue.component()方法） 使用组件
Vue.component()需要传入两个参数：第一个为希望使用的组件的标签名，第二个是组件构造器。 组件构造器对象的创建和组件注册的步骤都必须在Vue实例的同一个<script>标签下完成。 （后面会提到更为简便的创建方式） 全局组件和局部组件 上述基本用法中，注册的组件为全局组件，即该组件可以在多个Vue实例中使用 下面介绍局部组件的注册方法：在Vue实例化对象中有一个components （即父模板（本例为Vue实例）就去Vue构造对象中寻找，子组件模板就去子组件构造器中寻找） <!1.7K20编辑于 2022-02-17来自专栏盛开在夏天的太阳8.Vue组件三---slot插槽
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <title>Title</title> </head> <body DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <title>Title</title> </head> <body 对象, 在父组件中定义一个变脸isShow为true, 在子组件中定一个一个变量isShow:false. const app = new Vue({ el: "#app", 六. slot的作用域 首先, 我们创建一个Vue实例, 然后在Vue的data中定义一个books, 在组件中定义一个books 然后, 在模板中定义一个插槽, 遍历books. return { books: ["go语言", "java编程实战", "python人工智能", "php高阶开发
1.2K10发布于 2021-03-04来自专栏前端笔记ingVue 组件通信的 8 种方式
由于项目采用的技术栈是Vue， 平常开发只注重功能实现了，接下来陆续会对 Vue 深入分析,来封装常用业务组件，以及Vue源码解析 本章将是对Vue 组件通信的8方法总结，日常开发组件通信密切 ，熟悉组件通信可以更好的开发业务。 Vue 组件之间传值 1. 'vue' export default new Vue() 组件A <! Vuex 这里就不介绍了，完了单独写一篇文章精讲Vuex 8. provide 和 inject 实现父组件向子孙孙组件传值。
56550编辑于 2022-02-15来自专栏前端文章小tips8种vue组件通信方式（转载）
本篇文章带大家详细了解一下vue中8种组件通信方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ： 父子组件之间通信 非父子组件之间通信(兄弟组件、隔代关系组件等) 本文会介绍组件间通信的8种方式如下图目录所示:并介绍在不同的场景下如何选择有效方式实现的组件间通信方式，希望可以帮助小伙伴们更好理解组件间的通信 Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上 2. 使用props绑定来进行一级一级的信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一级级往上传递 使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低
1.4K50编辑于 2021-12-12来自专栏前端笔记ingVue 组件通信的 8 种方式
，如何更好的跟后端人员协作开发以及如何设计来提高用户体验上，之前自己做开发没关注这方面，只注重功能实现，后期的这块多补补。 由于项目采用的技术栈是Vue， 平常开发只注重功能实现了，接下来陆续会对 Vue 深入分析,来封装常用业务组件，以及Vue源码解析 本章将是对Vue 组件通信的8方法总结，日常开发使用组件通信非常密切 ，熟悉组件通信可以更好的开发业务。 ❞ Vue 组件之间传值 1. Vuex ❝这里就不介绍了，完了单独写一篇文章精讲Vuex ❞ 8. provide 和 inject 实现父组件向子孙孙组件传值。
59521发布于 2021-10-11来自专栏JavaEdgeVue开发实战(03)-组件化开发
对组件功能的封装，可以像搭积木一样开发网页。 Vue官方的示例图对组件化开发的形象展示。左边是一个网页，可以按照功能模块抽象成很多组件，这些组件就像积木一样拼接成网页。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aS7Zk8tp-1686298456553)(null)] 1 什么是组件化开发 1.1 浏览器封装好的组件 在页面的源码里写出的 Vue组件化机制很好用，只需在其基础上，掌握和学习组件化在使用上的设计理念，以实现高效的代码复用，开发中把组件分成： 通用型组件 业务型组件 通用型组件就是各大组件库的组件风格，包括按钮、表单、弹窗等通用功能 DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <title>子组件传值给父组件</title> <script DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-<em>8</em>"> <title>子组件传值给父组件</title> <script
63020编辑于 2023-07-09来自专栏小鑫同学编程历险记🧩 Vue 深入组件开发☞#依赖注入#
> import { ref, provide } from "vue"; import Container from ". ，在开发 Vue 插件的时候你可以尝试使用 ~ 使用 Inject 输入数据 key： 注入一个 key： 在 DeepChild 组件中通过 inject() 函数来传入指定数据的 key 来得到 上面的例子我们就直接传递的响应式的 text 对象，那在 Root 组件的后代组件中每一个都有可能会对这个响应式的数据做更改，为了保证更改函数的统一管理，Vue 建议我们在定义将响应式数据的变更与 provide 在这个场景下我们就需要限制这个响应式数据在提供给后代组件时仅为只读状态，当你尝试在后代组件修改时 Vue 会发出警告：Set operation on key "value" failed: target 文档的再熟悉并使用组合式 API 来演示了依赖注入的使用方式和一些注意事项，希望在后续开发中可以有所体现，实践是巩固技术的良好途径。
76710编辑于 2022-12-26
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号