vue2.0父子组件之间通信
父组件是通过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父子组件之间通信的更多相关文章
- Vue2.0父子组件之间和兄弟组件之间的数据交互
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
- Vue2.0父子组件之间的双向数据绑定问题解决方案
对于vue 1.0项目代码,如果把vue换成vue 2.0,那么之后项目代码就完全奔溃不能运行,vue 2.0在父子组件数据绑定的变化(不再支持双向绑定)颠覆了1.0的约定,很遗憾. 解决方案只有两种 ...
- vue2.0 父子组件之间的通信问题
概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- vue2.0父子组件通信的方法
vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...
- vue2.0父子组件以及非父子组件通信传参详解
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- vue2.0 父子组件通信 兄弟组件通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
随机推荐
- virtualbox虚拟机NAT模式下不能连接外网
背景 给VirtualBox虚拟机(装载了Ubuntu16.04系统)配置了两张网卡,网络模式分别为"网络地址转换(NAT)"和"仅主机(Host-Only)适配器&qu ...
- [国嵌攻略][100][嵌入式Linux内核制作]
Linux内核制作步骤 1.清除原有配置 make distclean 2.配置内核 选择一个已有的配置文件简化配置 make menuconfig ARCH=arm 3.编译内核 ARCH指明处理器 ...
- 使用phpMyAdmin批量修改Mysql数据表前缀的方法
多个网站共用一个Mysql数据库时,为使数据库管理不混乱,一般采用不同的网站使用不同前缀名的方式进行区分.而如何批量修改已有数据库的前缀名呢?全部导出修改后再导入?还是一个表一个表的修改?今天我要介绍 ...
- encodeURIComponent() 函数
https://baike.baidu.com/item/encodeURIComponent() 函数/7418815?fr=aladdin encodeURIComponent() 函数[1] 作 ...
- Flexbox学习总结
flex语法 采用Flex布局的元素,称为Flex容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称& ...
- HTML <td> 标签的 rowspan 属性
rowspan 属性规定单元格可横跨的行数. colspan 属性规定单元格可横跨的列数.
- oracle查看表空间下数据文件
下面两个数据字典视图就知道了.查看有哪些表空间:select * from dba_tablespaces;查看有哪些数据文件在哪个表空间中:select * from dba_data_files; ...
- WinForm中,设置不显示窗口的标题栏
1:ControlBox设置False,然后标题为""的时候标题就不显示了2:把窗体设置为无边的窗体 FormBoderStyle 设为 None (在Mdi中,关闭按钮会还在) ...
- java.lang.ClassNotFoundException: com.radiadesign.catalina.session.RedisSessionHandlerValve
org.apache.tomcat.util.digester.Digester.startElement Begin event threw exception java.lang.ClassNot ...
- Linux指令--df,du
linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 1.命令格式: df [选项] [文件] 2.命 ...