vue-03（组件化开发）

最新推荐文章于 2023-09-19 20:44:51 发布
最新推荐文章于 2023-09-19 20:44:51 发布
阅读量195 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiangChiZhaJi/article/details/105494629
版权

组件化开发思想

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

组件注册

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
组件是可以重用的，且每个组件的数据是独立的
另一个用法
在这里插入图片描述

注意事项

在这里插入图片描述
在这里插入图片描述
保证每个组件有自己的环境
在这里插入图片描述
在这里插入图片描述
可以用一个大的div包起来
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
驼峰命名放到跟元素，会报错
在这里插入图片描述
可以换成短横线
在这里插入图片描述
（驼峰式使用时只能在字符串模板中使用组件，在普通标签中必须使用短横线方式）

局部组件注册

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
再定义一个组件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
局部注册的组件只能在注册他的父组件里面使用

调试工具

组件间数据交互

父组件->子组件

在这里插入图片描述
在这里插入图片描述
绑定
在这里插入图片描述
结合使用：
在这里插入图片描述
在这里插入图片描述
因为第一个组件没有传递content
在这里插入图片描述
在这里插入图片描述
字符串类型
在这里插入图片描述
数值：
在这里插入图片描述
布尔值：
在这里插入图片描述
数组：
在这里插入图片描述
对象：
在这里插入图片描述

子组件像父组件传值

在这里插入图片描述

在这里插入图片描述
props传递数据是单向数据流，父到子可以，子到父不行

在这里插入图片描述
在这里插入图片描述
通过第二个参数
在这里插入图片描述
在这里插入图片描述

非父子组件

兄弟组件
在这里插入图片描述
new一个事件中心
监听事件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
销毁
在这里插入图片描述
在这里插入图片描述

组件插槽

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如果填充在slot里：
在这里插入图片描述
在这里插入图片描述

具名插槽

在这里插入图片描述
在这里插入图片描述
另一个方法：
在这里插入图片描述
在这里插入图片描述
template是vue的API，临时性的包裹信息，不会渲染到页面

作用域插槽

在这里插入图片描述
在这里插入图片描述
子组件封装好就很少动了，最好从父组件决定子组件哪个高亮，用作用域插槽
用slot包裹起来
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
slotProps是自定义的

案例

在这里插入图片描述
在这里插入图片描述
动态标题
在这里插入图片描述
在这里插入图片描述
计算总价

在这里插入图片描述
传入组件
在这里插入图片描述
通过遍历渲染页面图片和名字
在这里插入图片描述
在这里插入图片描述
把id传递给父组件
在这里插入图片描述
在这里插入图片描述
父组件监听：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

XiangChiZhaJi
关注
专栏目录
vue-3d-model-Vue组件中的3D模型查看器。-Vue.js开发
05-27
vue-3d-model vue.js 3D model viewer component, based on threejs, inspired by model-tag 一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。...
vue-audio-visual-Vue HTML5音频可视化组件。-Vue.js开发
05-27
vue视听Vue HTML5音频可视化组件概述安装和设置API通用道具AvLine道具AvBars道具AvCircle道具AvWavef vue视听Vue HTML5音频...它提供了多个Vue组件，这些组件允许为“音频” HTML元素绘制光亮的外观。 有一个DEMO ava
VUE-3：组件
kino2046的博客
03-25 2110
组件的注册 在`vue`中，我们可以通过`newVue`来创建一个组件，不过通常它是作为整个应用的顶层根组件存在的，我们还可以通过另外的方式 来注册一个更为通用的组件 Vue.component() 组件名称遵循自定义组件命名规范：全小写、连字符（虽然驼峰式一般也没问题） 组件选项与`newVue`选...
Vue3入门知识点
weixin_56548455的博客
08-10 1121
vue2与vue3的区别
在vue3中定义组件的5种方式
qq_42880714的博客
08-11 6871
在vue3中定义组件的5种方式
vue3笔记：自定义组件
weixin_45921387的博客
03-04 5999
defineProps()，IProps可以给props设置类型，withDefaults的第二个参数支持给props设置默认值
【Vue】修饰符、表单提交方式、自定义组件的关键步骤
最新发布
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
09-19 5012
学会表单的取值与绑定让你的交互跟为简单，搭配上修饰符更是锦上添花！！
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
以上代码展示了如何在Vue组件中引入Vue-Cron，通过`v-model`双向绑定Cron表达式，并监听`@change`事件来响应定时任务设置的变化。 总的来说，Vue-Cron是Vue.js开发中的一个实用工具，它简化了Cron表达式的使用，...
vue-diagrams-vue.js的图表组件，受react-diagrams启发-Vue.js开发
05-27
vue-diagrams vue.js的图组件，灵感来自使用vue-cli-template-library生成的react-diagrams。 安装npm install vue-diagrams vue-diagrams vue.js的图组件，灵感来自使用vue-cli-...之后，您可以在Vue组件中使用它：
vue-numeric-输入字段组件，用于显示基于Vue的货币值。-Vue.js开发
05-27
它以其声明式的数据绑定和组件化特性而闻名，使得开发过程更加高效和模块化。在这个特定的场景中，我们关注的是一个名为 "vue-numeric" 的输入字段组件，它是专为Vue.js设计的，用于处理和显示货币值。 vue-numeric...
Vue3 组件
qq_44336097的博客
04-17 1005
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。 一个应用需要被挂载到一个 DOM 元素中。 以下实例我们将 Vue 应用挂载到 <div id="app"></div
Vue3.x学习日记—— new Vue() 和createApp()的差别
weixin_45983676的博客
03-05 3414
在Vue2.x版本中，我们实例一个Vue都是使用new Vue()这种方法，特别是下面这种写法，在脚手架中也是非常常见的。但是在我们学习Vue3.x版本的时候，我们会发现，创建实例的方法变了，变成了createApp()这种方法，常见的代码如下作为一名程序员，就会产生一个疑问，为什么要改变创建实例的方法呢，单纯看代码，也没有什么大的改变，是哪里有改变呢？接下来我就用一个案例来展示一下有一些什么改变。
vue3组件创建，vue3组件全局注册，vue3组件插槽封装
imkaifan的博客
12-28 495
vue3组件创建，vue3组件全局注册，vue3组件插槽封装
Vue3自定义组件（一）
weixin_48288941的博客
09-01 931
错误写法：（这样写会导致页面加载时就自动调用editData(row)，然后button的onclick方法失效）,部分组件达不到自己的预期，但是又是通用的，所以这时候就想整个自定义组件了；这样一个简单的自定义组件就完成了，先整个简单的，后面再慢慢加其他功能吧。自己用vite创建了一个前端项目，UI使用的是。CommonTable.vue 是自定义组件的主体内容。props.ts是用于自定义组件参数。index.ts是用于组件批量导出。
Vue3自定义组件（四）
weixin_48288941的博客
09-08 515
时发现操作栏位通过h()来绑定按钮，使用起来不是很灵活，需要整个可以 完全自定义的组件，然后再绑定到操作栏位，这样才更方便，所以就改了下之前的操作栏位实现方式；在props.ts中新增了新组件的几个参数：（这些用于规范我自定按钮的参数有哪些，方便后续拓展有依据）default: "你确定继续操作吗?default: "你确定继续操作吗?这里实现了普通按钮和确认按钮两种操作按钮功能；（1）自定义操作按钮操作方法传递给子组件失败。注意新组件也要导出后，才能在父组件使用。这样子组件就无需重复定义已有组件参数；
松哥手把手教你在 Vue3 中自定义插件
江南一点雨的专栏
08-02 4114
installconsole.log("我的第一个插件")}};install中的方法将会被自动执行。app.use就表示引入插件，引入插件之后，插件中的install方法就会被自动执行。app.use方法接收两个参数，第一个参数就是我们导入的插件js对象，第二个参数是可选的，大家看到插件定义时候的install方法有两个参数，第一个参数是Vue实例，这是自动传入的，第二个参数options则是我们在app.use中，通过第二个参数传入进来的。...
使用 Vue 及自定义组件完成 10x10 图片表格的点击效果
zhu0205的博客
03-19 51
然后在body里面创建一个id为app的div，在id为app的div里面再创建一个class为content的div用于放置图片。接下来我们在div为"app"的下面或者body的下面创建一个script，定义一个Vue方法并且绑定div为"app"的盒子。在class为"content"的div里面添加自己定义的"aa_img"，并给它设置V-for循环(给图片传值)在script的data里面传入所有的图片地址，最后运行。工具： HBuilder X。Js插件：Vue.js。
vue3基础（三）组件命名及调用，render,render中获取插槽值，函数式组件，异步组件,vue3中data只有函数形式
差不少的博客
08-03 6715
组件命名及调用，render,render中获取插槽值，函数式组件，异步组件,vue3中data只有函数形式
Vue入门示例（二）
09-15 541
目录 08_v-show.html 09_event_keyboard.html 10_v-bind.html 11_v-bind_1.html 12_filter.html 08_v-show.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <...
Vue.js组件化开发实战与ES6特性探讨
"VUE.JS组件化开发实践" 在前端开发中，Vue.js是一个流行的JavaScript框架，尤其适合进行组件化的应用开发。组件化开发允许开发者将复杂的用户界面拆分成可重用、独立的模块，提高了代码的复用性和可维护性。在本文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值