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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
分类解析jQuery选择器
Nov 23 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
js实现数字跳动到指定数字
Aug 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 curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
javascript数组排序汇总
2015/07/07 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
跟老齐学Python之编写类之三子类
2014/10/11 Python
django文档学习之applications使用详解
2018/01/29 Python
python使用tornado实现简单爬虫
2018/07/28 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Python configparser模块应用过程解析
2020/08/14 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
民生工程实施方案
2014/03/22 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
小学生成绩单评语
2014/12/31 职场文书
节水倡议书
2015/01/19 职场文书
小学大队长竞选稿
2015/11/20 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
创业计划之特色精品店
2019/08/12 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript