Vue 单文件中的数据传递示例


Posted in Javascript onMarch 21, 2017

Vue 的单文件组件在使用 Vue 时非常常用,所以我们也会经常遇到组件之间需要传递数据的时候,大致分为三种情况:

  1. 父组件向子组件传递数据,通过 props 传递数据。
  2. 子组件向父组件传递数据,通过 events 传递数据。
  3. 两个同级组件之间传递数据,通过 event bus 传递数据。

文档中也已经详细的说明了各种情况下的解决方法,但是现在我在还没有阅读多少文档的情况下,没有找到有单文件组件方面的具体书写方式,智商和理解能力有限的情况下,自己尝试了一下,最后发现其实是一样的。所以这篇文章其实是废话,但是还是想记录一下,不枉自己花了一个多小时。

准备工作,我新建了 6 个文件,分别是:

  1. index.html
  2. main.js 「Vue 实例」
  3. app.vue 「根组件,包含 page 和 footer 组件」
  4. page.vue 「msg 的父组件,footer 的 同级组件」
  5. msg.vue
  6. footer.vue

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

这里我以 page 向 msg 传递数据为例:page.vue 中

<template>
  <div class="page">
    page
    <msg :love="message"></msg>
  </div>
</template>

<script>
import msg from './msg.vue'

export default {
 name: 'page',
 components: { msg },
 data () {
  return {
   message: 'page-msg'
  }
 }
}
</script>

msg.vue 中

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

<script>
export default {
 name: 'msg',
 props: ['love']
}
</script>

这样以后就会发现,实现了把父组件 page 中的数据传递到子组件 msg 中了。

另外,需要强调一下的是,不要在子组件中修改 props 的值,当然修改是有效的,非常不推荐,而且 Vue 也会有警告提示。正确的做法是传递给 data 中的属性或者计算属性。props 中的值是可以通过 this.love 访问到的。

特别注意 props 值是引用类型时的情况,不可以进行简单的赋值,会影响到父组件,正确的做法是进行深拷贝。

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

父组件 page.vue 中

<template>
  <div class="page">
    page
    <msg @passData="getData"></msg>
  </div>
</template>

<script>
import msg from './msg.vue'

export default {
 name: 'page',
 components: { msg },
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  getData (data) {
   console.log(data)
  }
 }
}
</script>

子组件 msg.vue 中

<template>
  <div class="msg">
  {{ msg }}
  <button @click="pass">点击</button>
 </div>
</template>

<script>
export default {
 name: 'msg',
 data () {
   return {
     msg: 'hello'
   }
 },
 methods: {
   pass () {
   this.$emit('passData', 'success')
  }
 }
}
</script>

点击后就会发现 console 出了 'success'。

同级元素之间传递数据,通过 event bus 来传递。

需要引入一个 Vue 实例 作为中央总线。page 组件中

<template>
  <div class="page">
    page
    <button @click="changeMsg">click</button>
  </div>
</template>

<script>
import msg from './msg.vue'
import { bus } from '../bus.js'

export default {
 name: 'page',
 components: { msg },
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  changeMsg () {
   bus.$emit('change', '666')
  }
 }
}
</script>

footer 组件中

<template>
  <div class="footer">
    footer
  </div>
</template>

<script>
import { bus } from '../bus.js'

export default {
 name: 'footer',
 data () {
  return {
   msg: 'hi'
  }
 },
 created () {
   bus.$on('change',(data)=>{
   console.log(data)
  })
 }
}
</script>

嗯,最后发现打印出来了 '666',这样就实现了。

最后总结一下:

父组件向子组件传递数据,通过 props 传递数据。具体做法只需要在父组件中绑定,在子组件中声明。

//父组件
<father>
  <child :love="msg"></child>
</father>

//子组件
export default {
  ...
  props: ['love']
}

子组件向父组件传递数据,通过 events 传递数据。具体做法时在父组件中监听,在子组件中触发。

<father>
  <child @passData="getData"></child>
</father>

//子组件
export default {
  ...
  methods: {
    pass () {
      this.$emit('passData', 'hi')
    } 
  }
}

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

import { bus } from './bus.js'//两个组件都要引入

//触发事件
export default {
  ...
  methods: {
    passData () {
      this.$emit('communicate', 'hello')
    } 
  }
}

//监听事件
export default {
  ...
  mounted: {
    this.$on('communicate', (data) => {
      //...
    })
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
常用的js方法合集
Mar 10 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
react组件基本用法示例小结
Apr 27 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 #Javascript
详解Vue 实例中的生命周期钩子
Mar 21 #Javascript
十大热门的JavaScript框架和库
Mar 21 #Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 #Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 #Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 #Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
You might like
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
用Python中的字典来处理索引统计的方法
2015/05/05 Python
python实现音乐下载的统计
2018/06/20 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Numpy之random函数使用学习
2019/01/29 Python
python多线程同步之文件读写控制
2021/02/25 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
最新茶叶店创业计划书
2014/01/14 职场文书
手机促销活动方案
2014/02/05 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
个人事迹材料范文
2014/12/29 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书