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 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
vue v-on监听事件详解
May 17 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 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/11/23 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
javascript globalStorage类代码
2009/06/04 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
使用angular写一个hello world
2015/01/23 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
python实现图片文件批量重命名
2020/03/23 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
python实现年会抽奖程序
2019/01/22 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
python和c语言的主要区别总结
2019/07/07 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
pytorch中的inference使用实例
2020/02/20 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
采购人员的个人自我评价
2014/01/16 职场文书
模范教师事迹材料
2014/02/10 职场文书
2015大学生实训报告
2014/11/05 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
公司借款担保书
2015/09/22 职场文书
2019消防宣传标语!
2019/07/10 职场文书
Python集合的基础操作
2021/11/01 Python