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 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
Vue插件之滑动验证码用法详解
Apr 05 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中几种常见的超时处理全面总结
2012/09/11 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
python从Oracle读取数据生成图表
2020/10/14 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
安全承诺书范文
2014/03/26 职场文书
终止劳动合同协议书
2014/04/14 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
律师函格式范本
2015/05/27 职场文书
2016公司年会主持词
2015/07/01 职场文书
员工聘用合同范本
2015/09/21 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
java中如何截取字符串最后一位
2022/07/07 Java/Android