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 相关文章推荐
js 返回时间戳所对应的具体时间
Jul 20 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 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多态的实现详解
2013/06/09 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
Python去除字符串两端空格的方法
2015/05/21 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
购买一个高级域名:BuyDomains
2018/03/11 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
个人作风建设自查报告
2014/10/22 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers