父组件是通过props属性给子组件通信的来看下代码:

父组件:

<parent>
<child :child-com="content"></child> //注意这里用驼峰写法哦
</parent> data(){
return {
content:'sichaoyun'
};
}

子组件通过props来接受数据

第一种方法

props: ['childCom']

第二种方法

props: {
childCom: String //这里指定了字符串类型,如果类型不一致会警告的哦
}

第三种方法

props: {
childCom: {
type: String,
default: 'sichaoyun'
}
}

子组件与父组件通信

vue2.0只允许单向数据传递,我们通过出发事件来改变组件的数据,废话少说,上干货

子组件代码

<template>
<div @click="open"></div>
</template> methods: {
open() {
this.$emit('showbox','the msg'); //触发showbox方法,'the msg'为向父组件传递的数据
}
}

父组件

<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法

methods: {
toshow(msg) {
this.msg = msg;
}
}

兄弟组件之间的通信

我们可以实例化一个vue实例,相当于一个第三方

let vm = new Vue(); //创建一个新实例

组件他哥

<div @click="ge"></div>
methods: {
ge() {
vm.$emit('blur','sichaoyun'); //触发事件
}
}

组件小弟接受大哥命令

<div></div>
created() {
vm.$on('blur', (arg) => {
this.test= arg; // 接收
});
}

vue2.0父子组件之间通信的更多相关文章

  1. Vue2.0父子组件之间和兄弟组件之间的数据交互

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...

  2. Vue2.0父子组件之间的双向数据绑定问题解决方案

    对于vue 1.0项目代码,如果把vue换成vue 2.0,那么之后项目代码就完全奔溃不能运行,vue 2.0在父子组件数据绑定的变化(不再支持双向绑定)颠覆了1.0的约定,很遗憾. 解决方案只有两种 ...

  3. vue2.0 父子组件之间的通信问题

    概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...

  4. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  5. vue2.0父子组件通信的方法

    vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...

  6. vue2.0父子组件以及非父子组件通信传参详解

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  7. vue2.0父子组件以及非父子组件如何通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  8. Vue.js 父子组件之间通信的方式

    Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...

  9. vue2.0 父子组件通信 兄弟组件通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

随机推荐

  1. 如何使用padlepadle 进行意图识别-开篇

    前言 意图识别是通过分类的办法将句子或者我们常说的query分到相应的意图种类.举一个简单的例子,我想听周杰伦的歌,这个query的意图便是属于音乐意图,我想听郭德纲的相声便是属于电台意图.做好了意图 ...

  2. MFC获取可执行文件(exe)所在文件目录

    可以应用函数GetModuleFileName(),举一个例子: CString strexe; ::GetModuleFileName(NULL,strexe.GetBufferSetLength( ...

  3. [国嵌笔记][025][ARM指令分类学习]

    算术和逻辑指令 1.mov 格式:mov {条件}{s} <dest>, <op> 作用:把一个值从一个地方移动到另一个地方,<dest>必须是寄存器 示例: @m ...

  4. java包装类简析

    对于8个基本类型,java提供了他们相应的包装类: 基本类型 包装类 byte java.lang.Byte short java.lang.Short int java.lang.Integer l ...

  5. 谁能教我iCloud怎么用?

    iCloud是苹果公司所提供的云端服务,使用者可以免费储存5GB的资料.你已经开始使用IOS5,并且你很兴奋的着手于将它同步至云服务层.以下就是怎样让你的设备更新至云服务层的非常简单的步骤.在你的iO ...

  6. Maven的主要特点

    Maven的主要特点   Maven -主要特点 那么,Maven 和 Ant 有什么不同呢?在回答这个问题以前,首先要强调一点:Maven 和 Ant 针对构建问题的两个不同方面.Ant 为 Jav ...

  7. java里程碑之泛型--类型通配符

    1,泛型与数组在子类上面的对比 在整理java泛型的类型通配符之前,我们先来研究下java在数组设计上的一个不合理.我们来看下面代码: public class Test { public stati ...

  8. HttpClient方式调用接口的实例

    使用HttpClient的方式调用接口的实例. public class TestHttpClient { public static void main(String[] args) { // 请求 ...

  9. Android 使用EventBus发送消息接收消息

    基本使用 自定义一个类 public class LoginEvent { private String code;//是否成功 public LoginEvent(String code) { th ...

  10. js点击图片查看大图,并可以拖动,且滚动滑轮放大缩小

    方法一:此方法在页面没有滚动条时无法缩放 JQuery function hideMax(){ $(".MAX_div").remove(); $("#Cover_Div ...