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 相关文章推荐
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
浅谈vue加载优化策略
Mar 19 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
PHP5中MVC结构学习
2006/10/09 PHP
PHP之数组学习
2011/05/29 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
Js中sort()方法的用法
2006/11/04 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
python抓取网页内容示例分享
2014/02/24 Python
python脚本监控docker容器
2016/04/27 Python
python安装教程
2018/02/28 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
医学生自我评价
2014/01/27 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
检讨书范文
2019/04/16 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript