当前位置: 首页 > 编程笔记 >

vue2.0 如何把子组件的数据传给父组件(推荐)

琴光亮
2023-03-14
本文向大家介绍vue2.0 如何把子组件的数据传给父组件(推荐),包括了vue2.0 如何把子组件的数据传给父组件(推荐)的使用技巧和注意事项,需要的朋友参考一下

在父组件 App.vue 中引用子组件 A.vue,把 A中的数据传给App.

ps:没看父组件传给子组件的先看看去。

1、代码

子组件 A.vue

<template>
 <div>
 <h3>这里是子组件的内容</h3>
 <button v-on:click="spot">点一下就传</button>
 </div>
</template>

<script>
 export default {
 methods: {
  spot: function() {
  // 与父组件通信一定要加上这句话
  this.$emit("spot", '我是子组件传给父组件的内容就我。。')
  }
 }
 }
</script>

父组件 App.vue

<template>
 <div id="app">
 <!-- 父组件直接用 v-on 来监听子组件触发的事件。 -->
 <!-- 需跟子组件中的$emit组合使用 -->
 <A v-on:spot="spot"/>
 </div>
</template>

<script>
import A from './components/A'
export default {
 name: 'App',
 components: {
 A
 },
 methods:{
 spot:function(data){
  console.log(data)
 }
 }
}
</script>

2、总结

1、$emit很重要,使用 $emit(事件名,参数) 触发事件

2、子组件需要某种方式来触发自定义事件

3、父组件直接用 v-on 来监听子组件触发的事件,需跟子组件中的$emit组合使用。

3、效果

总结

以上所述是小编给大家介绍的vue2.0 如何把子组件的数据传给父组件(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 我正在学习通过教程在父组件和子组件之间传递数据。我仔细检查了我的代码,仍然没有找出错误。 我的index.js Home.js 按钮更改链接onClick事件正在调用changeLink函数,该函数将新链接传递给props。 错误:-

  • 本文向大家介绍vue2.0父子组件及非父子组件之间的通信方法,包括了vue2.0父子组件及非父子组件之间的通信方法的使用技巧和注意事项,需要的朋友参考一下 1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数据. 2.子组件与父组件通信 那么,如果子组

  • 问题内容: 在React中,我有类似的文件 parent.js 包含文本框和按钮 child.js 包含P标签 App.js 包含父组件和子组件 问题 将“父级”上的“文本框”值传递给子级,并将其显示在子级标记中。 完整代码 堆叠 问题答案: 更新了示例以将数据传递给子组件。 https://stackblitz.com/edit/react- trmj9i?file=child.js 在下面添加

  • 问题内容: 我正在尝试将数据从子组件发送到其父组件,如下所示: 这是子组件: 我需要的是由用户在父组件中获取选定的值。我收到此错误: 谁能帮我发现问题? PS子组件正在从json文件创建一个下拉列表,并且我需要该下拉列表来显示json数组的两个元素彼此相邻(例如:“ aaa,english”是首选!) 问题答案: 这应该工作。在发送回道具时,您将其作为对象发送,而不是作为值发送,或者将其用作父组件

  • 问题内容: 我已经在子组件的窗体上创建了。使用jquery ajax方法提交该表单后,我将以json格式检索一些数据。我想将该数据置于父组件的状态。那么,react.js中是否有任何方法可以将值或数据从子组件传递到其父组件? 谢谢.. 问题答案: 在没有某种Flux实现的情况下执行此操作的方法是在父元素上创建一个函数来处理来自子级的响应/数据,并将该函数作为道具传递。然后从孩子那里调用该函数。像这

  • 我在用vue-cli支架做网页包 我的Vue组件结构/传家宝目前看起来如下: 应用程序 在应用程序级别,我需要一个vuejs组件方法,该方法可以将子组件的所有数据聚合到一个JSON对象中,然后发送到服务器。 有没有办法访问子组件的数据?具体来说,多层深? 如果没有,传递oberservable数据/参数的最佳实践是什么,这样当子组件修改它时,我就可以访问新的值?我试图避免组件之间的硬依赖关系,所以

  • 我有两个组件,一个是子组件,另一个是父组件。我正在有条件地撕裂我的子组件。这段代码的功能就是当你们点击按钮时,定时器将显示,当你们点击停止定时器将停止。这里“Timer”是子组件,我在“Timer”组件中使用了state属性,我想在单击“stop Timer button”之前显示Timer的值。那么如何将“timer”状态变量值从子组件传递到父组件呢。 这是父组件,下面的代码用于“计时器”组件。

  • 本文向大家介绍Vue2.x中的父组件传递数据至子组件的方法,包括了Vue2.x中的父组件传递数据至子组件的方法的使用技巧和注意事项,需要的朋友参考一下 父组件结构 template script 注意的点: •子组件的拼写方式:vGirlGroup写成v-girl-group •这里子组件中的绑定数据是:girls="aGirls",这里的aGirls数据是父组件中的data,girls是要传递至