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计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
js document.write()使用介绍
Feb 21 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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 cookies中删除的一般赋值方法
2011/05/07 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
python中有关时间日期格式转换问题
2019/12/25 Python
如何基于python测量代码运行时间
2019/12/25 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
致百米运动员广播稿
2014/01/29 职场文书
禁烟标语大全
2014/06/11 职场文书
学习教师法的心得体会
2014/09/03 职场文书
银行业务授权委托书
2014/10/10 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
预备党员自我评价范文
2015/03/04 职场文书
我的长征观后感
2015/06/09 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS