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 相关文章推荐
dojo随手记 gird组件引用
Feb 24 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
JavaScript实现表单验证功能
Dec 09 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
SONY SRF-40W电路分析
2021/03/02 无线电
用PHP产生动态的影像图
2006/10/09 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
js实现返回顶部效果
2017/03/10 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python的函数的一些高阶特性
2015/04/27 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
试述DBMS的主要功能
2016/11/13 面试题
大学生毕业的自我评价分享
2014/01/02 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
个人委托书范本
2014/04/02 职场文书
银行职员自我鉴定
2014/04/20 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书