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_08_函数对象
Oct 15 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
JS实现时间校验的代码
May 25 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&amp;MYSQL留言板源码
2020/07/19 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
python实现的重启关机程序实例
2014/08/21 Python
详解Python中for循环的使用方法
2015/05/14 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
酒店中秋节活动方案
2014/01/31 职场文书
艺术节主持词
2014/04/02 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
工程售后服务方案
2014/06/08 职场文书
农民工讨薪标语
2014/06/26 职场文书
园林技术专业求职信
2014/07/28 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
初中思品教学反思
2016/02/20 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang
Redis入门基础常用操作命令整理
2022/06/01 Redis
Vue深入理解插槽slot的使用
2022/08/05 Vue.js