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

在面对单个组件逻辑复杂需要拆分时，难免会遇到父子组件之间数据传递的问题。那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定，以及要注意哪些问题。

如何传递

父组件向子组件在进行传递时，使用的是 prop 特性进行传递。

约定

老规矩， 在使用前我们首先了解应该怎么使用，有哪些约束条件：

  • 子组件的 props 中定义要传递的变量名
  • 变量名同组件的命名规范
  • 父组件传值时，需要使用 短横线分隔命名
  • 使用 v-bind 进行传值

定义

首先在子组件中定义：

// Child.vue

export default {
  name: 'child'
  props: ['teamList']
}

这里使用了 驼峰命名 ，在传值时需注意要转换成 短横线分隔命名 。

我们定义了一个 teamList 的变量，此时我们就可以在这个组件中通过 this 使用这个变量了（同 data 中的数据）。

传值

在父组件中进行传值：

<template>
  <div>
    <child v-bind:teamList="teamList"></child>
  </div>
</template>

父组件中使用 v-bind 即可将数据传递下去了。

向子组件传递数据就是这么简单，本质上和 data 一样，只是这里单独使用 prop 特性将其区分开来。

需要注意的时：

通过 prop 特性传递下去的数组是 “单向”绑定的，父组件对数组的更新会影响到子组件。因此并不建议子组件对 prop 特性中的值进行修改

Js中在传递对象和数组时传递的时引用！因此：当子组件修改父组件传递下来的对象/数组时会影响到父组件中的状态

这个特性有利有弊，在某些情况下可以通过这种类似 hack 的方式来进行处理。

子组件反向传递

上面说到了，并不建议在子组件中修改 props 中的数据。那么当需要向父组件进行某种 反馈 时怎么办呢？

假设现在我们有一个登录弹出框的组件，通过子组件的方式调用了，当我们登录成功时该如何 通知 父组件做出相应的反应呢？

  1. 通过自定义事件，子组件调用 this.$emit('事件名', 参数)
  2. 使用 v-model 、组件中 model 选项与 input 事件模拟成 input 控件，对父组件中的值进行更新
  3. .sync 修饰符进行 “双向绑定”

这里只介绍第一种方式，因为后两种方式若羽也没用过几次 o(╯□╰)o

emit使用约定

  • 事件名的命名规范同组件
  • 父组件在绑定子组件上的自定义事件时，必须 完全匹配 事件名，这里不像组件与子组件中使用时是使用的 短横线分隔命名 ，而是 完全匹配 。

约定较少，主要注意使用时是和组件不同的，名称需要完全匹配。

emit使用

首先我们在子组件中定义事件,说是定义，不如说是调用。因为是子组件直接在某段逻辑中调用的 emit ：

// child.vue

export default {
  methods: {
    submit() {
      this.$emit('submitForm', this.data)
    }
  }
}

这里我们定义了调用的自定义事件名称为 submitForm ，那么在父组件中使用：

<!-- parent.vue -->

<template>
  <div>
    <child v-on:submitForm="submit"></child>
  </div>
</template>
<script>
export default {
  methods: {
    submit(data) {
      // 处理逻辑
    }
  }
}
</script>

可以看到这里在使用时， v-on 绑定的事件名称是 submitForm 而不是 submit-form 。

这一点需要注意。

写在后面

以上所述是小编给大家介绍的Vue 子组件与数据传递问题及注意事项 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

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

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

  • Vue表单类的父子组件数据传递示例

    使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在这里记录一下我平时常用的处理方式,这篇文章主要记录父子组件间的数据传递,非父子组件主要通过Vuex处理,这篇文章暂时不作说明. 与文档里给的方案一样,父组件向子组件传递数据主要通过 props,子组件向父组件传递数据主要通过触发器 $emit(),只是在用法上会有些不同. 1.传递基本类型数据 当子

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

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

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

  • vue组件数据传递、父子组件数据获取，slot,router路由功能示例

    vue组件数据传递、父子组件数据获取，slot,router路由功能示例

    本文实例讲述了vue组件数据传递.父子组件数据获取,slot,router路由功能.分享给大家供大家参考,具体如下: 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https:/

  • 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父组件和子组件之间数据传递和方法调用

    vue组件在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性. 父组件向子组件传值(子组件主动获取父组件的数据和方法) 父组件import引用子组件 使用子组件时在子组件上添加一个v-bind属性,并绑定上数据 在子组件中创建 props ,在props 中创建相同的属性名,用来接收数据 把接收到的数据在子组件中使用 子组件向父组件传值(父组件主动获取子组件的数据和方法) 子组件中需要发出该自定义

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

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

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

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

  • vue子组件使用自定义事件向父组件传递数据

    vue子组件使用自定义事件向父组件传递数据

    使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit('自定义的事件名称',传递给父组件的数据) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></scr

  • vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)

    最近开始在用elementUI做一个后台管理系统项目,遇到一个问题,需求是这样,在父组件有一个按钮,点击按钮会显示弹窗(子组件),在子组件中用的是elementUI 的el-diolog弹窗组件,在关闭弹窗时(elementUI自带事件)便会报错.话不多说直接上代码. DEMO 这是父组件的代码: <template> <div> <app-refund :dialogVisible="refundVisible"></app-refund&g

  • vue组件之间数据传递的方法实例分析

    vue组件之间数据传递的方法实例分析

    本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男'  把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&

  • Vue子组件props从父组件接收数据并存入data

    Vue子组件props从父组件接收数据并存入data

    目录 1.不允许直接修改 2.存在异步的情况 解决思路 经过测试父组件中传递过来的数据有以下特点: 1.不允许直接修改 如果直接使用 this.xxx = action 操作的话 控制台会报下面这个错误 大概的意思是 你小子不要随便劈我瓜,我父组件的瓜岂是你能变的,父组件重新渲染时,这个值会被覆盖,你小子自个儿用计算属性或者data存一下吧 2.存在异步的情况 假如父组件该数据是后台接口获取的数据,那么会产生这种情况.子组件的生命周期都已经走完了,父组件的数据还没传过来.因为V8引擎的运行速度是

随机推荐