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 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
AngularJS内置指令
Feb 04 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
基于Vue实现timepicker
Apr 25 Javascript
js自定义瀑布流布局插件
May 16 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
php实现短信发送代码
2015/07/05 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
JS实现点星星消除小游戏
2020/03/24 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
简洁的十分钟Python入门教程
2015/04/03 Python
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
Python打印输出数组中全部元素
2018/03/13 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
线程同步的方法
2016/11/23 面试题
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
数学系毕业生的自我评价
2014/01/10 职场文书
个人授权委托书范本
2014/09/14 职场文书
机关作风建设心得体会
2014/10/22 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
贷款收入证明范本
2015/06/12 职场文书
2016入党心得体会范文
2016/01/06 职场文书
canvas 中如何实现物体的框选
2022/08/05 Javascript