Vue2.0组件间数据传递示例


Posted in Javascript onMarch 07, 2017

Vue1.0组件间传递

  • 使用$on()监听事件;
  • 使用$emit()在它上面触发事件;
  • 使用$dispatch()派发事件,事件沿着父链冒泡;
  • 使用$broadcast()广播事件,事件向下传导给所有的后代

Vue2.0后$dispatch(),$broadcast()被弃用,见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换

1,父组件向子组件传递场景:Father上一个输入框,根据输入传递到Child组件上。

父组件:

<template>
 <div>
  <input type="text" v-model="msg">
  <br>
  //将子控件属性inputValue与父组件msg属性绑定
  <child :inputValue="msg"></child>
 </div>
</template>
<style>

</style>
<script>
 export default{
  data(){
   return {
    msg: '请输入'
   }
  },
  components: {
   child: require('./Child.vue')
  }
 }
</script>

子组件:

<template>
 <div>
  <p>{{inputValue}}</p>
 </div>
</template>
<style>

</style>
<script>
  export default{
    props: {
     inputValue: String
    }
  }
</script>

2,子组件向父组件传值场景:子组件上输入框,输入值改变后父组件监听到,弹出弹框

 父组件:

<template>
 <div>
//message为子控件上绑定的通知;recieveMessage为父组件监听到后的方法
  <child2 v-on:message="recieveMessage"></child2>
 </div>
</template>
<script>
 import {Toast} from 'mint-ui'
 export default{
  components: {
   child2: require('./Child2.vue'),
   Toast
  },
  methods: {
   recieveMessage: function (text) {
    Toast('监听到子组件变化'+text);
   }
  }
 }
</script>

子组件:

<template>
 <div>
  <input type="text" v-model="msg" @change="onInput">
 </div>
</template>
<script>
 export default{
  data(){
   return {
    msg: '请输入值'
   }
  },
  methods: {
   onInput: function () {
    if (this.msg.trim()) {
     this.$emit('message', this.msg);
    }
   }
  }
 }
</script>

以上所述是小编给大家介绍的Vue2.0组件间数据传递,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
JavaScript作用域链示例分享
May 27 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
JS功能代码集锦
May 04 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
js实现网页定位导航功能
Mar 07 #Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 #Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 #Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 #Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 #Javascript
基于JavaScript实现图片剪切效果
Mar 07 #Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 #Javascript
You might like
php实现字符串反转输出的方法
2015/03/14 PHP
php加密解密字符串示例
2016/10/13 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python数组定义方法
2016/04/13 Python
详解Django配置优化方法
2019/11/18 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
SQL Server笔试题
2012/01/10 面试题
会计专业毕业生自我评价
2013/09/25 职场文书
音乐专业自荐信
2014/02/07 职场文书
结婚周年感言
2014/02/24 职场文书
科学发展观活动总结
2014/08/28 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
基层党组织整改方案
2014/10/25 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers