Vue.js将methods传值到data

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量3k 收藏 1
点赞数 1
分类专栏： Vue.js 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwj_shixian/article/details/121264389
版权

        由于最近刚刚接触前端技术，在前端通过按钮触发get请求到后端成功返回json数据，解析并展示在前端页面上困扰了一上午时间，现将完整实现步骤记录下来。

一、首先就是再组件中添加点击事件

 

二、实现点击事件方法

三、接收并解析后端返回的json数据

 

 

四、将methods中的值传给data（第二步的.then）

 

你好-C嘉嘉
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue】vue从服务端获取数据赋值给data，如何渲染更新视图
李古拉雷
03-28 2万+
从服务端取到的数据需要实时反馈，否则将毫无意义！ 目录 介绍一下Vue.set()方法 一：data中定义一个对象： 二：从服务端发起请求返回新数据对象： 三：用 Vue.set()方法更新数据 下面介绍一下第二种情况： 一：我们在data中定义一个很大的临时对象 二：我们在计算属性中也定义很大的对象 三：发起异步请求，从服务端返回数据 四：页面模板组件中使用方法 ...
Vue methods方法之间传递数据
Nedaf博客
12-23 3862
一、Vue methods方法之间传递数据 参考如下例子 代码如下（示例）： var vm = ({ el: '#app ', methods : { method1 : function ( event) { var aaa='test'; //a是菜种操作产生的结巢，这里演示定义了一个空对象 return aaa; // 返回想要的值 }， method2 : function (event) { var aaa1 = this.method1(); /..
对vue中methods互相调用的方法详解
10-18
今天小编就为大家分享一篇对vue中methods互相调用的方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
06-Vue:组件通信、Todo案例
weixin_51339105的博客
07-28 103
两个组件关系非常的复杂，通过父子组件通信是非常麻烦的，可以使用通用的组件通信方案—事件总线(event-bus)父组件传给子组件是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型。2.子组件不能直接修改父组件传递过来的props，props是只读的；1.App.vue中定义数组传入TodoMain.vue组件中；1.props选项的值可以为数组类型也可以是对象类型；2.子组件中通过props定义变量，直接使用变量；1.父组件数据发生了改变，子组件会自动跟着变；...
Vue通信组件之三：父组件向子组件传值
u013089490的博客
11-05 482
  【父组件向子组件传值data和props区别】      子组件中默认是无法访问到父组件中data上的数据和methods中的方法。我们可以在父组件引用子组件的时候，通过属性绑定(v-bind:)的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，以供子组件使用。      子组件的data(){}中的数组是子组件自己私有的数据，而子组件props中的数据是父组件传...
Vue笔记_03配置项_data与methods
qq_43260366的博客
11-26 1016
vue会将data对象与methods对象中的成员 平铺到 vue实例中，所以methods中的方法相当于vue实例化对象调用的，this指向vue实例化对象；data为一个函数，每一次调用函数，就会重新生成一个新的data对象,类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。​ 当我们将数据定义在data函数中，当数据发生改变的时候，vue会通过get、set方法监听到，若是页面中使用了-会重新渲染页面；方法,这个方法的参数是一个回调函数，在dom数据更新完成之后被调用.
Vue组件传值 之 子组件使用父组件的methods(方法)
Luceyyy的博客
11-28 661
父组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> &l
Vue中如何绑定事件 传递参数
xiaowude_boke的博客
02-23 1226
vue绑定事件 v-on
vue中的带参数的方法如何传递其他参数
忆璇的博客
10-13 1292
在vue开发中我们经常用到控件提供的事件方法，比如el-select的@change方法，比如el-upload的on-success方法，这些方法是有默认回调参数的，这时候如果想自己再传递别的参数，该如何处理呢？
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3854
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
vue.js和vue.min.js
06-13
vue.js和vue.min.js
v2.6.10-vue.js&vue.min.js&vue.common.js&vue.runtime.js等14个资源
03-12
内容：vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common....
vue.js 下载，引入vue.js 本地开发
05-18
vue.js 下载，引入vue.js 本地开发
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
vue实战开发.快速上手.好不容易找到电子版.非PDF版
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 622
步骤很详细，直接上教程……
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 362
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue项目中异步组件的引入使用
Niucode的博客
04-26 254
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 277
vue echarts 柱状图 堆叠柱状图
this.$refs父子传值
08-16
在 Vue.js 中，父组件向子组件传递值可以通过 props 进行。而子组件向父组件传递值可以借助自定义事件和 $emit 方法。 父组件向子组件传递值（props）的示例： 1. 在父组件的模板中，使用子组件并通过 props 传递值： ```html <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> ``` 2. 在子组件中，通过 props 接收父组件传递的值： ```html <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'], } </script> ``` 子组件向父组件传递值（自定义事件）的示例： 1. 在子组件的模板中，定义一个按钮，通过点击触发自定义事件： ```html <template> <div> <button @click="sendValueToParent">传递值给父组件</button> </div> </template> <script> export default { methods: { sendValueToParent() { this.$emit('custom-event', '传递的值'); } } } </script> ``` 2. 在父组件中，通过监听子组件的自定义事件接收传递的值： ```html <template> <div> <child-component @custom-event="handleValueFromChild"></child-component> <p>从子组件接收的值：{{ receivedValue }}</p> </div> </template> <script> export default { data() { return { receivedValue: '' } }, methods: { handleValueFromChild(value) { this.receivedValue = value; } } } </script> ``` 通过这种方式，父组件和子组件可以进行双向的传值操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值