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. 【笔记】virtualbox+arch+kde5安装流水账

    正常安装就是RTFD就行了,不行辅助这几个链接也行: 我先把整个脚本[1]放这里: loadkeys us parted mkfs.ext4 /dev/sda1mkfs.ext4 /dev/sda3 ...

  2. [LeetCode 题解] Search in Rotated Sorted Array

    前言 [LeetCode 题解]系列传送门: http://www.cnblogs.com/double-win/category/573499.html 题目描述 Suppose an array ...

  3. WPF 最简单的TextBox水印

    最简单的TextBox加水印的方法,但是不具有很强的通用性. 如果你只是使用一次,或者用的不多,偷偷懒可以使用. 因为此方法只需要修改TextBox的Template,而不用重写何任代码. 注意: 1 ...

  4. 如何统计TFS代码库中的团队项目所占用的磁盘空间

    在一个开发团队较多的研发中心,当开发人员的代码数据积累到一定程度,TFS系统的磁盘空间的使用率会逐渐成为系统管理员关注的问题.你可能会关注代码库中每个团队项目,甚至每个目录占用的的磁盘空间.不幸的,即 ...

  5. TFS应用层服务器获取F5用户的真实IP地址(高可用性)

    当用户数量达到一定级别(例如2千)以上,为保证TFS系统的持续服务,最大程度减少因系统宕机对研发团队的影响,系统管理员一般会考虑应用层和数据库层的高可用性方案. 在应用层的高可用性方案中,目前比较常见 ...

  6. JS——图片预览功能

    <script type="text/javascript">    function DisplayImage(fileTag) {        document. ...

  7. CentOS更改ssh端口

    https://blog.csdn.net/lukaixiao/article/details/74852375  来源处处. 注意!这里的Centos版本是7 step1 修改SELinux ech ...

  8. 如何利用Python绘制一个爱心

    刚学习Python几周,闲来无事,突然想尝试画一个爱心,步骤如下: 打开界面 打开Python shell界面,具体是Python语言的IDLE软件脚本. 2.建立脚本 单击左上角’File’,再单击 ...

  9. Python中进程和线程的总体区别

    Num01–>线程 线程是操作系统中能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位. 一个线程指的是进程中一个单一顺序的控制流. 一个进程中可以并发多条线程,每条线程并行 ...

  10. 访问www.baidu.com后会发生什么(一次完整的网络通讯过程)

    1.在浏览器中输入www.baidu.com 这意味着浏览器要向百度发送一个网页数据包,要发送数据包,需要知道对方的IP地址,这里我们只知道网址为www.baidu.com,却不知道IP地址,此时应用 ...