Vue 组件封装、组件传值、数据修改

最新推荐文章于 2024-12-09 20:45:02 发布
原创 最新推荐文章于 2024-12-09 20:45:02 发布 · 3k 阅读 · 13 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue #组件封装 #组件传值 #子组件修改父组件值 #数据修改
本文介绍了Vue组件封装的意义和方法，包括如何创建组件、引用组件以及组件间的传值。通过组件封装，可以实现页面解耦，增强代码可读性，并简化多次使用的组件的修改。组件传值通过props实现，而数据修改则利用Vue的事件机制，通过$emit将修改通知给父组件，确保数据同步。这种做法提高了代码的维护性和效率。

Vue 组件封装

封装的意义
当一个页面元素过多或者一个组件在多个页面都会被使用，就可以进行组件封装，可以对单个页面解耦，增加代码的可读性，并且多次使用的组件方便修改，只用修改一个地方就能对用到这个组件的所有地方进行修改。

方法
建立一个新的vue文件，在template中写好自己的组件，如图请添加图片描述
然后在需要引用这个组件的页面进行引用
在这里插入图片描述
请添加图片描述
这样就简单实现了组件的封装，效果如图
请添加图片描述

组件传值

如上的例子，封装的组件需要图标、名字、描述等值，这些值需要在引用的页面传入封装组件。

首先在export default里面把需要传递的参数在props里面申明
在这里插入图片描述

在组件中需要使用变量的地方绑定参数
在这里插入图片描述
在父组件中通过 v-bind: 绑定参数或者直接通过 ：
在这里插入图片描述
这样就能把参数传入封装组件

数据修改

当封装的组件要对数据进行修改时，封装组件的修改后的结果需要让父页面同步做出改变。

如下图所示，是需要修改的数据
在这里插入图片描述
在method里面写入相应的方法
在这里插入图片描述
然后再封装组件的修改数据的函数中用emit修改父页面的参数
在这里插入图片描述
这样当封装组件的对父页面传入值做修改时，父页面的值也会同步修改

vue怎么封装组件,组件之间传值?
一步一个脚印，踏实努力，向着目标前进
05-31 877
在Button组件中使用 this.$emit(‘click’) 触发‘click’事件，然后在父组件中使用@click绑定了一个handleButtonClick事件处理程序。到这里，我们可以看到，在Vue中组件封装和数据传递的方式主要是通过props和事件实现的。组件封装旨在将组件的实现细节封装起来，并公开一个可维护的接口给组件的调用者。我们通过@click绑定了一个点击事件，使用$emit来触发‘click’事件，这样可以在父组件中监听‘click’事件。
Vue如何将数据显示在页面中
weixin_44066534的博客
07-18 1万+
如何将data的数据显示在页面中 1.文本插值：{{}} <div id="root">{{msg}}</div> <script> new Vue({ el:"#root", data:{ msg:'hello world' }, }) </script> 渲染结果 <div id="root">hello world</div> 2.原始HTML插值：v-html、v-t
Vue中的数据操作
har的博客
06-06 9344
Vue的数据操作
vue使用组件修改子组件内容
Mystery_Fan的博客
09-01 1245
vue页面中使用组件，修改组件中的部分内容 1. 在组件中首页写好组件内容以及样式 例： 在组件中的重要部分：name，props属性。 <template> <view class="pets-title"> <h3>{{title}}</h3> </view> </template> <script> export default { name:"pets-title", //在vue页面中使用自组件的名
Vue中子组件修改父组件的值(使用v-model优化,所有自定义组件可用v-model)
热门推荐
目标前端大佬
02-25 2万+
效果图展示 此组件有需要的同学可以直接复制使用 子组件 timerPickLimit.vue <!-- @name: 24 * 7时间选择器 @description: 主要作用于设备禁止登录时间选择 @Method: 使用v-model改进 等价<timer-pick-limit :value="formData.loginLimit" @input="val => forData.loginLimit = val"/> <timer-pick-limit v-model="
Vue实现公共模板组件的封装、CSS样式封装props传值，模板数据传值、方法执行等，以及实现公共模板组件自定义修改（插槽封装）
前端与全栈技术领域探索者，分享实用干货与实战经验，助力开发者成长
02-15 996
通过公共模板组件封装，实现公共部分业务的代码复用，减少不必要的重复开发，减轻开发工作，同时可以避免重复造轮子的尴尬。2、公共模板组件全局注册（main.js或者main.ts）本文原创，原创不易，如需转载，请联系作者授权。3、公共模板组件的使用。1、公共模板组件封装。
超详细~vue3+ts封装element plus表格组件教程（附源码）
最新发布
qq_65130943的博客
12-09 1769
日期姓名
深圳大鹏生态监控平台（Vue3 大屏应用） 问题记录
Lyrelion的博客
02-22 552
深圳大鹏生态监控平台（Vue3 大屏应用） 问题记录
Vue 知识点总结（自检）
✈
09-16 619
MVVM是model-view-viewModel的简写, 它是一种开发模式, 它实现了视图和数据逻辑之间的分离, model模型指的是后端传递的数据, view视图指的是所看到的页面, viewModel是连接视图view和模型model的桥梁, 从而实现模型model到视图view的转化 和 视图view到模型model的转化, 也就是我们所说的双向数据绑定, 使用MVVM模式实现的前端框架有 vue 和 react。(1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。
Vue2.0开发之——Vue组件-组件属性(34)
我的博客
12-10 2646
为Count组件添加自定义属性为自定义属性添加v-bind自定义属性props是只读的自定义属性default默认值自定义属性type值类型自定义属性required必填值moreprops 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！它的语法格式如下//组件的自定义属性props:['自定义属性A','自定义属性B','其他自定义属性...'],//组件的私有数据data(){return {}}}布局代码。
vue 封装方法并每个页面调用
Thekingyu的博客
06-16 1万+
新建一个js export function activeFn(yong) { // 中英文互换 let storage=localStorage.getItem("key") if(storage=="zhCHS"){ this.ch=false this.eng=true this.$i18n.locale='zhCHS' }else { ...
vue子组件修改prop值的多种方案
【03】的博客
07-17 1万+
场景1：父传值给子组件，子组件改变父元素传过来的prop值 实现方法1 通过父传子，子调用父方法传参数实现 父组件 <template> <child-view :num="num" @updateNum="updateNum"></child-view> </template> <script> import childView from './assembly/child' export default { componen
Vue中子组件通过v-model动态修改父组件中的值
抗争小青年的博客
05-20 6841
Vue中子组件通过v-model动态修改父组件中的值
vue路由传值与重调本路由改变参数
like896369216的博客
04-26 6165
vue路由传值与重调本路由改变参数重新渲染页面
Vue父组件传参，子组件修改并使用
CF1402345274的博客
10-15 920
父组件 Tabs.vue <template> <div> <h2>我是一个选项卡</h2> <div class="tabs"> <el-button type="primary" :class="{ active: showtype === 'Home' }" @click="showtype = 'Home'" >Home</el-button> <el-but
封装后的组件如何修改
weixin_44886300的博客
09-14 732
简单记录 项目需求： 需求发了个图给我，长这样： 我心想：挺容易的，把整个ag-side-bar组件隐藏掉就完事了。 半个月后，问怎么改，我就这么给他说了，然后他说，不对，我的意思是只去掉自定义工具栏。 我心想：噢，那应该也不难，把那个按钮隐藏掉就好了……结果一看，傻了，这是封装好的组件里面又做了一层封装（如下图），直接改组件样式还真没法改。 解决方法： 自己想不出来，求助大佬去了。 其实也不难： nextTick()用法理解参考： 1.https://blog.csdn.net/zhouzuoluo/
前端Vue篇之Vue中封装的数组方法有哪些，如何实现页面更新
星辰迷上大海的博客
02-21 1528
Vue中封装的数组方法包括push、pop、shift、unshift、splice、sort和reverse。页面更新是通过Vue对这些方法进行特殊处理，确保当数组发生变化时，Vue能够自动更新相关的页面内容。这样，开发者无需手动干预页面更新，提供了更好的开发体验。
VUE3父组件向子组件传参，参数随子组件值修改
Amiel_Tian的博客
11-03 1427
【代码】VUE3父组件向子组件传参，参数随子组件值修改。
Vue 子组件修改父组件传递过来的值
weixin_45442464的博客
08-26 1万+
1. 常用的方法 一般通过子组件修改父组件传递过来的值,我们就会采用props和$emit进行单向数据绑定 父组件: <template> <div> <test :value="value" @change="change"></test> </div> </template> <script> import test from '@/components/test.vue' export d
vue中子组件间接修改父组件传递过来的值
铁锤妹妹的博客
02-26 9944
父组件传递值给子组件是单向数据绑定; 子组件不能直接修改父组件的数据，但是可以间接修改数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值