vue2.0嵌套组件之间的通信($refs,props,$emit)
vue的一大特色就是组件化,所以组件之间的数据交互是非常重要,而我们经常使用组件之间的通信的方法有:props,$refs和emit。
初识组件之间的通信的属性和方法
props的使用
子组件使用父组件的数据,使用vue的属性props。
当我们在父组件parent里面嵌套一个子组件son的时候,如果我们需要使用父组件的数据的时候,我们可以在子组件标签上面绑定一个属性,然后在子组件里面通过props来调用这个属性,就可以使用这个数据了。
//父组件
<sonPart :list="listDate"></sonPart>
//子组件
<div>{{list}}</div>
export default{
props:["list"]
}
props的数据类型
1,数组:当我们简单使用数据的时候,这时候props可以是一个数组的类型
props: ['list1','list2'.....]
2,对象:当我们要设置所使用的数据的类型、默认值等的时候,props就可以是一个Object类型
props: {
list1: {
type: Number/String/Boolean/Array/Object, //类型
default: function (){return}, //默认值
required: true/false //是否必填
}
}
$refs
vue有一个$refs属性,当只是组件的内容的时候,可以通过这个属性获得DOM元素,对这个DOM进行操作;如果是这个组件的子组件的时候,可以通过这个属性获得这个子组件对象,就可以访问这个组件里面的data与methods里面的内容了。(这时候取得子组件的数据一般是静态的)
$refs的使用
在DOM标签或者组件标签的时候,添加一个ref属性,ref="name"。
添加这个属性后,就可以通过this.$refs.name获得这个DOM元素或者子组件
//父组件
<son ref="children"><son>
export default {
mounted: {
//这时候就可以获得了这个子组件
let son = this.$refs.children
}
}
$emit
当父组件获取的数据,需用通过子组件来动作(click、change等)改变后数据,这时候我们通过ref是获取不到的,获取的也是改变前的数据。
因为emit绑定的事件触发的时候,附加参数都会传给监听器回调。所以数据就会改变
//父组件
//template部分
<sonPart @getList="enter"></sonPart>
//js部分
import sonPart from './sonPar.vue';
export default{
data () {
radioData: ''
},
methods:{
enter:function(value){
this.radioData = value
}
},
components: {sonPart}
}
//子组件
<form @change="getData">
<label><input type="radio" v-model="dataList" value="0" name="list1">one</label>
<label><input type="radio" v-model="dataList" value="1" name="list1">two</label>
</form>
export default{
data () {
dataList:''
},
methods:{
getData:function(){
this.$emit("getList",this.dataList);
}
}
}
$emit的参数
当我们使用的emit的时候,第一个参数为父组件使用方法名,后面一个参数为传递的数据。当数据有几个的时候,可以使用对象的形式传递参数。
methods: {
getData: function() {
this.$emit("getList",{name: this.dataList,value:"leo"[,....]}
}
}
站在巨人的肩膀上摘苹果:
https://blog.csdn.net/weixin_33813128/article/details/94177294
https://www.jb51.net/article/140581.htm
vue2.0嵌套组件之间的通信($refs,props,$emit)的更多相关文章
- vue2.0 父子组件之间的通信问题
概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...
- vue2.0父子组件之间通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- Vue2.0父子组件之间的双向数据绑定问题解决方案
对于vue 1.0项目代码,如果把vue换成vue 2.0,那么之后项目代码就完全奔溃不能运行,vue 2.0在父子组件数据绑定的变化(不再支持双向绑定)颠覆了1.0的约定,很遗憾. 解决方案只有两种 ...
- Vue2.0父子组件之间和兄弟组件之间的数据交互
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- Vue 组件&组件之间的通信 之 非父子关系组件之间的通信
Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...
- 手把手教你撸个vue2.0弹窗组件
手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍 预览地址 http://haogewudi.me/kiko/inde... 源码地 ...
- vue2.0 父子组件通信 兄弟组件通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
随机推荐
- 关于基本布局之——Grid布局
Gird布局 一.关于概念 网格布局(Grid)是一个很强大的 CSS 布局方案.它可以将网页划分为多个网格任意拼接的布局,可以灵活的运用并实现出多种布局形式. (grid和inline-grid区别 ...
- mysqldump 备份与恢复操作记录
一,参数详解 [root@bug ~]# ? mysqldump --master-data[=#] mysqldump导出数据时,当这个参数的值为1的时候,mysqldump出来的文件就会包括CH ...
- liberty | 在IDEA整合Springboot与IBM liberty
在IDEA整合Springboot与IBM liberty 简介 Liberty 是一款全新的轻量级应用服务器,它将用户的良好开发体验作为最主要的出发点.其主要特点和内容包括: 高模块化--该功能允许 ...
- Django部署--uwsgi配置--nginx服务器配置
uwsgi.ini文件 [uwsgi] #使用nginx连接时使用,Django程序所在服务器地址 socket=127.0.0.1:8000 #直接做web服务器使用,Django程序所在服务器地址 ...
- 最好用的web端代码文本编辑器ACE
使用足够简单,功能足够强大,体验足够优秀 之前有一个系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,总共发了四篇文章介绍了三个非常棒的插件,分别是bootstrap-duallistbox ...
- JAVA环境配置(Windows10)
Java开发环境配置 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:https://www.oracle.com/technetwork/java/javase/downloads/ ...
- HDU_4456_二维树状数组
http://acm.hdu.edu.cn/showproblem.php?pid=4456 第一道二维树状数组就这么麻烦,题目要计算的是一个菱形范围内的和,于是可以把原来的坐标系旋转45度,就是求一 ...
- Java并发编程(三):ReentrantLock
ReentrantLock是可以用来代替synchronized的.ReentrantLock比synchronized更加灵活,功能上面更加丰富,性能方面自synchronized优化后两者性能没有 ...
- Go语言实现:【剑指offer】二叉搜索树的第k个的结点
该题目来源于牛客网<剑指offer>专题. 给定一棵二叉搜索树,请找出其中的第k小的结点.例如,(5,3,7,2,4,6,8) 中,按结点数值大小顺序第三小结点的值为4. Go语言实现: ...
- [Effective Java 读书笔记] 第7章 方法
第39条 必要时进行保护性拷贝 对于可变类,如果作为参数传入到自己的类里,并作为自己类的数据使用存储时,需要进行保护性拷贝,比如Date是可变的,如果传入一个Date类,最好做一个保护性拷贝,以免在调 ...