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)的更多相关文章

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

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

  2. vue2.0父子组件之间通信

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

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

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

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

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

  5. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  6. Vue 组件&组件之间的通信 之 非父子关系组件之间的通信

    Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...

  7. 手把手教你撸个vue2.0弹窗组件

    手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍 预览地址 http://haogewudi.me/kiko/inde... 源码地 ...

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

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

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

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

随机推荐

  1. C语言寒假大作战01

    问题 回答 这个作业属于哪个课程 2019软件四班C语言寒假作业大作战 这个作业要求在哪里 作业要求 我在这个课程的目标是 gitee 与 git基础命令学习与使用 这个作业在那个具体方面帮助我实现目 ...

  2. composer intall 报错

    报错 [Composer\Exception\NoSslException] The openssl extension is required for SSL/TLS protection but ...

  3. Python使用requests发送post请求的三种方式

    1.我们使用postman进行接口测试的时候,发现POST请求方式的编码有3种,具体的编码方式如下: A:application/x-www-form-urlencoded ==最常见的post提交数 ...

  4. java反射API

    反射主要对象 Class Constructor Field Method API-Class 获取Class对象 Object.getClass() className.class Class.fo ...

  5. react 获取input的值 ref 和 this.setState({})

    1.ref //class my_filter(reg){          const inpVal = this.input.value;          console.log(inpVal) ...

  6. 学习记录一(Python算数运算符与if语句)

    从网上找到一个Python的学习视频,之前的环境都装好了,今天看的就是算术运算符和变量的命名 其中Python的除法直接就是 / %用于求余 其中还可以进行幂运算**    例如2 ** 3 = 8 ...

  7. Spring框架学习笔记(9)——API接口设计相关知识及具体编码实现

    最近需要设计一个API服务器,想要把API接口搞得规范一下,就通过网上搜集到了一些资料,以下便是自己的一些理解以及相关的具体实现 本文采用的是spring boot+maven的方案 restful规 ...

  8. 牛客练习赛34 D little w and Exchange(归纳)

    题意: 给n个数,和m 问这组数是否可以构成[1, m]中的每一个数 思路: 先将a数组排序. 先算算构成前几个数需要什么,至少需要a[1]=1 需要a[2] = 1,2 在a[2] = 1的情况下a ...

  9. 【LaTeX】记录一下LaTeX的安装和使用

    由于排版论文的需要,了解了一些LaTeX的相关内容,下面简单记录关于LaTeX的安装和使用 维基百科: LaTeX(/ˈlɑːtɛx/,常被读作/ˈlɑːtɛk/或/ˈleɪtɛk/),文字形式写作L ...

  10. Mysql索引优化简单介绍

    一.关于MySQL联合索引 总结记录一下关于在MySQL中使用联合索引的注意事项. 如:索引包含表中每一行的last_name.first_name和dob列,即key(last_name, firs ...