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 相关文章推荐
jquery滚动加载数据的方法
Mar 09 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 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
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
Json解析的方法小结
2016/06/22 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
python进度条显示之tqmd模块
2020/08/22 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
大学自主招生自荐信
2013/12/16 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
会计工作态度自我评价
2015/03/06 职场文书
费城故事观后感
2015/06/10 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python