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

最新推荐文章于 2023-05-31 15:05:43 发布
最新推荐文章于 2023-05-31 15:05:43 发布
阅读量2.6k 收藏 12
点赞数 1
分类专栏： 前端问题总结 文章标签： vue 组件封装 组件传值 子组件修改父组件值 数据修改
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DyP__CSDN/article/details/120153694
版权

Vue 组件封装

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

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

组件传值

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

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

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

数据修改

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

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

DyP__CSDN
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue父子组件双向绑定传值的实现方法
01-19
父子组件之间的双向绑定非常简单，但是很多人因为是从Vue 2+开始使用的，可能不知道如何双向绑定，当然最简单的双向绑定（单文件中）就是表单元素的 v-model 了，例如 <input type=text /> 它会响应表单元素的 value 属性，当输入框文本改变时，会将 value 值传给 v-model 所绑定的变量，如果同时设置 v-model 和 value ， value 属性无效。 父子组件的自定义双向 v-model 当若干dom封装成组件时，在父组件中使用子组件时，却无法在子组件标签上使用 v-model ，因为子组件标签不是表单元素,这个时候，我们需要自定义我们想要的
vue组件封装echart折线图
08-30
直接定义vue数据和承载的DIV,即可实现复用。使用Vue组件封装Echart柱状图，直接引用组件js，并且在需要展示的地方，进行Vue数据传值，支持多坐标轴。本案例非Webpack打包，直接引用JS即可。适用于部分页面使用Vue功能，或者想尝试Vue功能的同学。该组件使用方法比较简单，也可以自行修改样式扩展功能，但是需要自行查看echart的api配置文档。
vue中组件的3种使用方式详解
12-01
前言 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。 在vue angular react三大前端框架的大前端时代。许多人选择了vue，在 github 上的star，vue已经超过react的数量了。虽然star并不能代表vue更强，不过在发展速度上看来，vue确实很快。 在模块化的前端时代，万物皆组件，vue学习组件是必不可少的。 可是在大多数人熟悉了纯html、jq之后，在初次接触vue的组件时候，却是满脸蒙蔽。 今天咱们以最简单的方式，带vue小白童鞋们，步入组件的世界~ 咱们今天讲三种组件使用方式 基本组件 全局组件 构造组件 1.
Vue 组件间传值及事件触发Demo
09-07
Vue 组件间传值及事件回调
vue修改父组件对象
weixin_59916662的博客
11-09 4423
vue3修改父组件单一值，对象，数组
vue怎么封装组件,组件之间传值?
一步一个脚印，踏实努力，向着目标前进
05-31 596
在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 8771
Vue的数据操作
Vue中子组件通过v-model动态修改父组件中的值
抗争小青年的博客
05-20 6100
Vue中子组件通过v-model动态修改父组件中的值
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组件
12-11
想要封装好一个自己的vue组件，一定要熟练掌握这三个技能 父组件 —> 子组件传值（props） 子组件 —> 父组件传值（$emit） 以及插槽（slot） 对于一个独立的组件来说 props是用来为组件内部注入核心的内容； $emit...
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
10-15
主要介绍了vue中父子组件传值,解决钩子函数mounted只运行一次的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue element-ui之怎么封装一个自己的组件的详解
12-12
为什么要进行组件封装？ 封装的目的就是为了能够更加便捷、快速的进行业务功能的开发。组件（component）是vue的最强大功能之一，组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。在开发中，我们难免会写很...
vue实现组件之间传值功能示例
12-30
本文实例讲述了vue实现组件之间传值功能。分享给大家供大家参考，具体如下： slot标签： 想向封装好结构的组件中插入内容，需要借助<slot></slot> 在组件之中进行关联：如 模板中： <slot name='txt'></slot> 组件...
vue.js从入门到深入再到随心而用——————vue.js中的（组件、父组件和子组件之间的传值、兄弟组件数据交互、插槽的用法）
01-08
(这篇小总结主要总结了veu中组件、父组件和子组件之间的传值、兄弟组件数据交互、插槽的用法) 1.组件 定义： 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素，封装可重用的代 1.1组件的基本...
vue项目中实现图片预览的公用组件功能
10-17
小编接到查看影像的功能需求，根据需求，多个组件需要用到查看影像的功能，所以考虑做一个公用组件，通过组件传值的方法将查看影像文件的入参传过去。下面小编通过实例代码给大家分享vue项目中实现图片预览的公用...
【JavaScript源代码】Vue组件传值过程中丢失数据的分析与解决方案.docx
12-29
Vue组件传值过程中丢失数据的分析与解决方案 　在上一篇文章 JavaScript 中的两种数据类型中，分别介绍了基本类型和引用类型，以及引用类型的浅拷贝与深拷贝。这里需要注意的是，该文章中深拷贝引用类型值的方法，并...
echarts.js 动态生成多个图表 使用vue封装组件操作
01-19
组件只做了简单的传值处理，...vue 使用组件 ——在外层用v-for 循环，传不同值进charts 即可 <!-- 传入对应的数据给子组件 --> id='charts +index' index=index xss=removed> <!-- 传入对应的数据给子
Vue2.0 组件传值通讯的示例代码
01-19
在Vue项目中，我们经常把某个功能模块封装起来，形成组件，下次调用时非常方便，同时也是在一些循环中进行dom操作的一种较好方式。 本次我想以一个评价组件来说一下组件的事件和参数是怎样传递的，如何完成的组件...
vue组件封装，组件向引用页面传值
最新发布
06-09
好的，针对您的问题，我可以给您提供一个简单的Vue组件的代码示例，该组件封装了一个名为`text`的字符串类型的prop属性，并且在组件内部将这个属性的值通过事件`input`传递给了父组件，从而实现了组件向引用页面传值的功能。您可以将这个示例代码集成到您的项目中，也可以根据自己的需求进行修改： ```vue <template> <div> <input type="text" :value="text" @input="$emit('input', $event.target.value)"> </div> </template> <script> export default { name: 'MyComponent', props: { text: { type: String } } } </script> ``` 在这个组件中，我们使用了Vue的`props`属性来声明一个名为`text`的prop属性，类型为字符串类型。在模板中，我们使用了Vue的`v-bind`指令将`text`绑定到了一个输入框的`value`属性上，并且监听了输入框的`input`事件。当输入框的值发生变化时，我们通过`$emit`方法触发了一个名为`input`的事件，并将输入框的新值作为参数传递给了这个事件。 在使用这个组件的时候，我们可以在父组件中使用`v-model`指令来绑定组件的`text`属性。例如： ```vue <template> <div> <my-component v-model="message"></my-component> <p>{{ message }}</p> </div> </template> <script> import MyComponent from '@/components/MyComponent' export default { name: 'App', components: { MyComponent }, data() { return { message: 'Hello, World!' } } } </script> ``` 在这个示例中，我们使用了`v-model`指令将`my-component`组件的`text`属性绑定到了父组件的`message`属性上。这样，当`my-component`组件的输入框的值发生变化时，`message`的值也会随之变化，并且在页面上展示出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值