vue组件中的数据传递方法


Posted in Javascript onMay 14, 2018

Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。组件之间传递数据大致分为三种情况:

父组件向子组件传递数据,通过 props 传递数据。

子组件向父组件传递数据,通过 events 传递数据。

两个同级组件之间传递数据,通过 event bus 传递数据。

一、父组件向子组件传递数据

子组件部分:

<template>
  <div class="child">
    {{ msg }}
  </div>
</template>
<script>
export default {
 name: 'child',
 data(){
  return {
  
  }
 },
 props: ['msg']
</script>

在child.vue中,msg实在data中定义的变量,使用props:['msg']从父组件中获取msg的值

父组件部分:

<template>
  <div class="child">
    child
    <child :msg="message"></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   message: 'hello vue'
  }
 }
}
</script>

在调用组件的时候,使用v-bind将msg的值绑定为parent.vue中定义的变量message,这样就能将parent.vue中的message的值传给child.vue了。

单项数据流

当父组件的 message 发生改变,子组件也会自动地更新视图。但是在子组件中,我们不要去修改 prop。如果你必须要修改到这些数据,你可以使用以下方法:

方法一:把 prop 赋值给一个局部变量,然后需要修改的话就修改这个局部变量,而不影响 prop

export default {
  data(){
    return {
      newMessage: null
    } 
  },
  props: ['message'],
  created(){
    this.newMessage = this.message;
  }
}

方法二:在计算属性中对 prop 进行处理

export default {
  props: ['message'],
  computed: {
    newMessage(){
      return this.message + ' 哈哈哈';
    }
  }
}

二、子组件向父组件传递数据

子组件主要通过实践传递数据给父组件的

子组件部分:

<template>
  <div class="child">
   <span>用户名:</span>
   <input v-model="username" @change="sendUser" />
  </div>
</template>

子组件的html中,当input中的值发生改变时,将username传递给parent.vue。

首先声明了一个sendUser方法,用change事件来调用sendUser。

<script>
 export default {
  name: 'parend',
  data () {
   return {
     username: ''
   }
  },
  methods: {
   sendUser () {
    this.$emit('changeName', this.username)
   }
  }
}
</script>

在sendUser中,使用$emit来遍历changeName事件,并返回this.name,其中changeName是一个自定义的事件,功能类似于一个中转,this.name将通过这个事件传递给父组件。

父组件部分:

<template>
  <div class="parent">
    <child @changeName="getUser"></child>
    <p>用户名:{{user}}</p>
  </div>
</template>

在父组件中声明了一个getUser方法,用changeName事件调用getUser方法,获取从子组件传递过来的参数username

<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   user: ''
  }
 },
 methods: {
  getUser(data) {
   this.user = data
  }
 }
}
</script>

getUser方法中的参数msg就是从子组件中传递过来的参数uesrname。

三、同级组件间的数据传递

有时候两个组件也需要通信(非父子关系)。当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。

<template>
  <div id="app">
    <c1></c1>  //组件1
    <c2></c2> //组件2
  </div>
</template>

组件c1中:

<template>
  <div class="c1">
    page
    <button @click="changeMsg">click</button>
  </div>
</template>
<script>
var Bus = new Vue(); //为了方便将Bus(空vue)定义在一个组件中,在实际的运用中一般会新建一Bus.js
export default {
 name: 'c1',
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  changeMsg () {  //点击按钮,将this.message传递给c2
   bus.$emit('sendMsg', this.message)
  }
 }
}
</script>

组件c2中:

<template>
  <div class="c2">
    {{msg}}
  </div>
</template>

<script>
var Bus = new Vue();

export default {
 name: 'c2',
 data () {
  return {
   msg: ''
  }
 },
 created () {
  bus.$on('sendMsg',(data)=>{  //data即为c1组件中的message
   this.msg = data
  })
 }
}
</script>

在实际运用中,一般将bus抽离出来:

//Bus.js
import Vue from 'vue'
const Bus = new Vue()
expore default Bus

组件调用时引用(import Bus from './Bus.js')

但这种引入方式,经过webpack打包后可能会出现Bus局部作用域的情况,即引用的是两个不同的Bus,导致不能正常通信
实际运用:

将Bus注入到Vue根对象中

import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
  el:'#app',
 data:{


Bus
  }

})

在子组件中通过this.$root.Bus.$on(),this.$root.Bus.$emit()来调用

总结

以上所述是小编给大家介绍的vue组件中的数据传递方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
babel基本使用详解
Feb 17 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
vue如何在自定义组件中使用v-model
May 14 #Javascript
JavaScript常用数学函数用法示例
May 14 #Javascript
JavaScript中常见内置函数用法示例
May 14 #Javascript
纯js封装的ajax功能函数与用法示例
May 14 #Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 #Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 #Javascript
jQuery中元素选择器(element)简单用法示例
May 14 #jQuery
You might like
图象函数中的中文显示
2006/10/09 PHP
PHP新手上路(三)
2006/10/09 PHP
jQuery代码优化 选择符篇
2011/11/01 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python定时任务sched模块用法示例
2018/07/16 Python
TensorFlow实现Logistic回归
2018/09/07 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python可视化text()函数使用详解
2020/02/11 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
大学生应聘自荐信
2013/10/11 职场文书
环保建议书作文
2014/03/12 职场文书
好的促销活动方案
2014/08/21 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
运动会班级前导词
2015/07/20 职场文书
离婚协议书范文2016
2016/03/18 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
sass 常用备忘案例详解
2021/09/15 HTML / CSS
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫