背景:最近在做vue的项目,因为页面的逻辑比较复杂,代码量较多,所以就想抽离出一些组件放到component里面。问题就随之来了。
因为vue不提倡在子组件中修改父组件的值,所以如果要这样操作的话就要麻烦一步,而我正好需要这样的操作,于是就查阅了资料
上父组件的代码,引用了exp-group子组件
<exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptData"></exp-group>
grpVisible 和 grpData 是传给子组件的属性,一个是普通类型,一个是对象
grpVisible: false, grpData: {app: this.$route.query.app, exp: this.$route.query.exp},
接下来我要在子组件中改变这两个属性的值传给父组件,先要在子组件中定义一下
props: { grpVisible: { type: Boolean, default: false }, grpData: { type: Object } },
首先普通类型的 grpVisible 属性如果要修改,需要定义一个变量将 grpVisible 值复制给这个变量,然后再修改这个变量,传递给父组件,具体见代码
let demo1 = this.grpVisible demo1 = true this.$emit('updateData', demo1) //子组件
父组件通过acceptData的参数value接收这个值
acceptData (value) { console.log(value) }, //父组件
如果是对象的话,就需要用Object.assign拷贝一份新的赋值给一个变量,然后修改这个变量,传递给父组件,代码如下:
let demo1 = Object.assign({}, this.grpData) demo1.app = 'binge' this.$emit('updateData', demo1)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍浅谈Vue父子组件和非父子组件传值问题,包括了浅谈Vue父子组件和非父子组件传值问题的使用技巧和注意事项,需要的朋友参考一下 本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue 2.在main.js中引入 import goodsList from 'goods/good
父组件动态传递ref给子组件应该怎么写? 父组件调用 子组件 这里我想把父组件传递的ccc动态给子组件,然后操作子组件?
本文向大家介绍vue 子组件向父组件传值方法,包括了vue 子组件向父组件传值方法的使用技巧和注意事项,需要的朋友参考一下 子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 子组件component-a这么写 以上这篇vue 子组件向父组件传值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。
本文向大家介绍详解Vue之父子组件传值,包括了详解Vue之父子组件传值的使用技巧和注意事项,需要的朋友参考一下 一、简要介绍 父子组件之间的传值主要有三种:传递数值、传递方法、传递对象,主要是靠子组件的 props 属性来接收传值,下面分别介绍: (一)传递数值 1.子组件:Header.vue 可以看到,在子组件中的data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性,接
本文向大家介绍浅谈Vue2.0父子组件间事件派发机制,包括了浅谈Vue2.0父子组件间事件派发机制的使用技巧和注意事项,需要的朋友参考一下 从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了。官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆落。特别是在组件层级比较深的情况下。通过广播和事
本文向大家介绍详解vue父子组件间传值(props),包括了详解vue父子组件间传值(props)的使用技巧和注意事项,需要的朋友参考一下 先定义一个子组件,在组件中注册props 在父组件中,引入子组件,并传入子组件内需要的值 这种方式只能由父向子传递,子组件不能更新父组件内的data 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍图文介绍Vue父组件向子组件传值,包括了图文介绍Vue父组件向子组件传值的使用技巧和注意事项,需要的朋友参考一下 1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属性绑定并赋值给子组件 5:子组件通过 props 接收父组件传递过的数据
如何在Vue.js中将父模型绑定到子模型? 如果我手动填写输入,那么孩子的模型返回它的值到父的模型。 但问题是,如果来自AJAX的数据集在父级中请求,那么输入不会自动填充。 有人能帮我吗? Form.vue FormInput.vue