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
最新文章
- [fiddler] 使用fiddler script自定义代理规则
- GCC 编译优化指南(转)
- 一、MongoDB的下载、安装与部署
- java解析JSON (使用net.sf.json)
- 1297 - Largest Box(三分)
- 七牛用户如何将视频转码成普清高清来适应不同的手机端或者web端
- python基础教程_学习笔记10:异常
- tmux 简单介绍
- 经济学人使用Golang构建微服务历程回顾
- mouseTracking
- 轮询、中断、DMA和通道
- Java基础——字符编码
- ASP输出JSON数据及客户端jQuery处理方法
- SeqGAN 原理简述
- 使用Method swizzling (也就是运行时交换两个方法的imp ,实现重写方法)
- OpenGL chapter3 基础渲染
- ASP.NET中Literal,只增加纯粹的内容,不附加产生html代码
- Python 进阶(一)函数式编程
- Wasserstein距离 和 Lipschitz连续
- spring data jpa条件分组查询及分页