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 相关文章推荐
纯js分页代码(简洁实用)
Nov 05 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
解析js如何获取css样式
Dec 11 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
Vuex的actions属性的具体使用
Apr 14 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 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php图片缩放实现方法
2014/02/20 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
php微信开发之谷歌测距
2018/06/14 PHP
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
python字典DICT类型合并详解
2017/08/17 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
考博专家推荐信模板
2013/12/02 职场文书
学校端午节活动方案
2014/08/23 职场文书
英语课外活动总结
2014/08/27 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
关于感恩的作文
2019/08/26 职场文书
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers