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>
 

开始使用 Vuejs 2.0 --- 组件间数据传递的更多相关文章

  1. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  2. vue 组件间数据传递

    父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...

  3. React和Vue组件间数据传递demo

    一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...

  4. Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  5. [转]Angular2-组件间数据传递的两种方式

    本文转自:https://www.cnblogs.com/longhx/p/6960288.html Angular2组件间数据传递有多种方式,其中最常用的有两种,一种是配置元数据(或者标签装饰),一 ...

  6. Angular2-组件间数据传递的两种方式

    Angular2组件间数据传递有多种方式,其中最常用的有两种,一种是配置元数据(或者标签装饰),一种是用单例模块传递:有两个元数据具有传递数据的功能:inputs和outputs. 一.元数据传递 1 ...

  7. 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  8. VUE组件间数据方法的传递,初步了解

    父组件的数据传递到子组件: 子组件:(其中fMsg是要从父组件传递过来的数据,注意fMsg要在子组件props里先定义) 父组件:(使用v-bind,将自身数据绑定给中转属性fMsg,从而通过 子组件 ...

  9. 详细介绍ASP.NET页面间数据传递的使用方法

    源码:http://www.jinhusns.com/Products/Download/?type=xcj 在ASP.NET中,页面间数据传递的方法有很多.下面为大家总结一下,页面间数据传递的方法. ...

随机推荐

  1. 团队博客-第六周:Alpha阶段项目复审(科利尔拉弗队)

    团队的排名-点评:以下排名点评谨代表个人观点,如有冒犯,评论联系删除 小组名字和链接 优点 缺点,bug报告(至少140字) 最终名次(无并列) 中午吃啥队 微信小程序应用,新型app会是一个便利的使 ...

  2. Oracle SQL性能优化技巧大总结

    http://wenku.baidu.com/link?url=liS0_3fAyX2uXF5MAEQxMOj3YIY4UCcQM4gPfPzHfFcHBXuJTE8rANrwu6GXwdzbmvdV ...

  3. 从SEQUENCE跳号说起

    http://blog.csdn.net/agaric717/article/details/6690890 一个应用上线后发现一个使用SEQUENCE值来生成的主键经常出现断号,而且断号不是一两个, ...

  4. delphi 升级到xe7后的一些个人经验

    http://blog.csdn.net/span12/article/details/42522091 你只要记住 字符串使用变了.VCL 下面所有的 char 改 ansichar string ...

  5. [翻译]ASP.NET Web API 2 中的全局错误处理

    目录 已存在的选项 解决方案预览 设计原则 什么时候去用 方案详情 示例 附录: 基类详情 原文链接 Global Error Handling in ASP.NET Web API 2 由于翻译水平 ...

  6. 构建NetCore应用框架之实战篇(四):BitAdminCore框架1.0登录功能细化及技术选型

    本篇承接上篇内容,如果你不小心点击进来,建议从第一篇开始完整阅读,文章内容继承性连贯性. 构建NetCore应用框架之实战篇系列 一.BitAdminCore框架1.0版本 1.1.0版本是指最小版本 ...

  7. 【2019年OCP新题】OCP题库更新出现大量新题-11

    11.Your database is in archivelog mode. You want to disable archiving for the database. Examine thes ...

  8. 双向链表的实现——java

    实现类: /** * Java 实现的双向链表. * 注:java自带的集合包中有实现双向链表,路径是:java.util.LinkedList * * @author skywang * @date ...

  9. echart 遇到的点

    1,图表随着外部container变化而变化: window.onresize = myChart.resize (拿着resize在api文档中搜就看到了)

  10. centos 6 下,zephir的安装和使用

    centos 6 下,zephir的安装和使用 zephir或许会开启一个新的PHP编写方式. 在这之前,如果我们要编写php的扩展,一般都是c++/clang/vc等等. 但是现在,我们有了新的选择 ...