Vue 父子组件的数据传递、修改和更新方法

父子组件之间的数据关系，我这边将情况具体分成下面4种：

父组件修改子组件的data，并实时更新

子组件通过$emit传递子组件的数据，this.$data指当前组件的data(return{...})里的所有数据，

this.$emit('data',this.$data);

之后通过父组件的getinputdata方法来接收数据

@data='getinputdata'

其中的data就是传过来的数据，通过修改这个数据就可以通过父组件实时更新子组件

getinputdata(data) {
 console.log(data);
 data.background = {
  backgroundColor: 'yellow',
  border: 'none'
 };
}

子组件修改父组件的data

在子组件中是修改不了父组件的data的，只有通过上面的$emit方法在父组件中修改数据。

可参考vue官网的自定义事件：https://cn.vuejs.org/v2/guide/components.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6

子组件获取父组件的data，修改但不实时更新

1. 子组件将父组件通过props传递的数据，再把props的值赋给let或var声明变量，之后使用这个变量就可以了。

let test = this.testoutdata;
test++;
console.log(test);
console.log('test:'+this.testoutdata);

2. 子组件将父组件通过props传递的数据，再把props的值赋给data(return{...})里的变量，之后使用这个变量就可以了。

this.outtest++;
console.log(this.outtest);
console.log('test:'+this.testoutdata);

可参考vue官网的自定义事件：https://cn.vuejs.org/v2/guide/components.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81

父组件获取子组件的data，修改但不实时更新

这边的方法和‘子组件获取父组件的data，修改但不实时更新'的方法一样，其中只有传值的方式有区别。子组件通过$emit把值传给父组件。

以上这篇Vue 父子组件的数据传递、修改和更新方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue父子组件的数据传递示例
  • vuejs动态组件给子组件传递数据的方法详解
  • vue2.0 父组件给子组件传递数据的方法
  • vue父组件通过props如何向子组件传递方法详解
  • vuejs2.0子组件改变父组件的数据实例
赞 (0)

相关推荐

  • vuejs动态组件给子组件传递数据的方法详解

    通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定 <div class="app" id="deviceready"> <component :is="currentView" :user_name.s

  • vuejs2.0子组件改变父组件的数据实例

    在vue2.0之后的版本中,不允许子组件直接改变父组件的数据,在1.0的版本中可以这样操作的,但是往往项目需求需要改变父组件的数据,2.0也是可一个,区别是,当我们把父元素的数据给子组件时,需要传一个对象,子组件通过访问对象中的属性操作数据,下面是演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document

  • vue父组件通过props如何向子组件传递方法详解

    前言 本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: vue 组件中的 this vue 中 data/computed/methods 中 this的上下文是vue实例,需注意. 例如: 注意:不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }} ) .理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例

  • vue2.0 父组件给子组件传递数据的方法

    vue2.0 父组件给子组件传递数据的方法

    在父组件 App.vue 中引用子组件 A.vue,把 name 的值传给 A 组件. 1.安装 在桌面新建一个文件夹 $ cd 到文件中 $ npm install -g vue-cli $ vue init webpack . $ npm install $ npm run dev vue init webpack . 之后的选择解释 2.删除 1.删除App中的一些内容如下 2.删除components文件中的HelloWorld.vue 3.修改 修改App.vue 如下: <templ

  • vue父子组件的数据传递示例

    vue父子组件的数据传递示例

    1.父组件向子组件传递数据 <div id="box"> <aaa></aaa> </div> <template id="aaa"> <h1>模板aaa=>{{msg1}}</h1> //msg1写在这里是可以的,因为这是父组件内部 //<bbb>{{msg1}}</bbb> //这种写法是不可以的,这是在子组件内部,要在这里显示父组件的数 //据,需

  • Vue 父子组件的数据传递、修改和更新方法

    父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新 子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { c

  • Vue 子组件与数据传递问题及注意事项

    在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问题. 如何传递 父组件向子组件在进行传递时,使用的是 prop 特性进行传递. 约定 老规矩, 在使用前我们首先了解应该怎么使用,有哪些约束条件: 子组件的 props 中定义要传递的变量名 变量名同组件的命名规范 父组件传值时,需要使用 短横线分隔命名 使用 v-bind 进行传值 定义 首先在子组件中定义: // Child.vue expo

  • Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)

    目录 方式一:通过监听事件实现 方式二:通过 v-model 实现 方式一:通过监听事件实现 父组件将数据传递给子组件通过 props 实现:而子组件将数据传递给父组件通过事件来实现,在子组件中定义一个事件,在该事件中传递值,由父组件中监听这个事件.通过这种方式实现父子组件双向绑定的效果最常见. 子组件案例代码: <template> <el-select v-model="value" placeholder="请选择" @change=&quo

  • 解析React ref 命令代替父子组件的数据传递问题

    解析React ref 命令代替父子组件的数据传递问题

    前言 我们在谈论受控组件的时候,会去使用父子通信的方式去进行数据传递,从而达到组件的受控,其实并非这一种方案,当我们对表单组件进行受控处理的时候,往往会使用 ref 命令去进行数据传递,使用传统的父子通信当然可以实现,只不过对于表单组件来说,ref 更加的便捷 使用父子通信解决表单域的数据传输问题 既然说是表单域组件,那么我们就写一个表单域组件出来 import React, { Component } from 'react'; import Field from './Field'; exp

  • angularjs2中父子组件的数据传递的实例代码

    父到子组件之间的数据传递 父组件模板中引用子组件 // father template: ... <child-item [name] = "fatherItemName" > </child-item> //...` 其中"fatherItemName" 为父组件中的属性,[name] 为子组件的输入 在子组件中使用 @Input() name 来接受父组件传递的值 如果在接收值前需要进行一些处理,可以使用setter 拦截输入属性 _na

  • vue两组件间值传递 $router.push实现方法

    两组件间传值,可能包含多种情况,有父子组件和非父子组件,对于父子组件网上有很详细的方法讲解,但非父子组件传值有用bus总线,还有一些其他方法,其中的使用路由跳转的方法讲解太过简洁,难以理解.因为是公司项目,采用的是公司封装的UI框架,但基本上还是采用vue框架,ts编写.所以一些样式结构可能没有参考价值,但我会讲解清楚每一部分作用,主要是路由跳转部分的代码实现. 首先,需求如下图,树状列表每一项有一个编辑按钮,点击按钮之后跳转到另一个路由页面,会将树状列表中每一项数据带过来. vue文件部分:

  • Vue组件间数据传递的方式(3种)

    vue中传递数据的方式有哪些 数据流的方式传递数据 通过 props 传递属性 父级给demo2组件绑定一个msg数据 父组件 <template> <div class='container'> <demo2 :msg="msg" @change="change" /> </div> </template> <script> import demo2 from './demo2' export

  • Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

    当我们在书写 vue 组件的时候,也许可能会用到数据传递:将父组件的数据传递给子组件,有时候也需要通过子组件去事件去触发父组件的事件: 每当我们遇到这样的需求的时候,我们总是会想到有三种解决办法: 通过 props 的方式向子组件传递(父子组件) vuex 进行状态管理(父子组件和非父子组件) vuex 非父子组件的通信传递 Vue Event Bus ,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递. 后来再逛社区的时候我又发现了还有第四种传递方式, inheritAttrs +

  • Vue中父子组件的值传递与方法传递

    一.Vue中父组件向子组件传值 利用v-bind向子组件传值,子组件中利用props接受 <div id="app"> <father></father> </div> <template id="father"> <div> <!--注意点: 组件是可以使用自己的数据的--> <p>{{name}}</p> <p>{{age}}</p>

随机推荐