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+css在交互上的应用
Jul 18 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 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微信分享开发详解
2017/01/14 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
菜单效果
2006/10/14 Javascript
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python中实现常量(Const)功能
2015/01/28 Python
Python contextlib模块使用示例
2015/02/18 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
物流专业求职计划书
2014/01/10 职场文书
建筑个人求职信范文
2014/01/25 职场文书
战略合作意向书
2014/07/29 职场文书
高考升学宴答谢词
2015/01/20 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
农业项目投资意向书
2015/05/09 职场文书
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
Android Rxjava3 使用场景详解
2022/04/07 Java/Android