vue祖孙组件之间的数据传递案例祖孙组件之间的数据传递案例
**解决的问题：解决的问题：**
使用$attrs和$listeners实现祖孙组件之间的数据传递，也就是多重嵌套组件之间的数据传递。
**注意：注意：**
本方法针对vue2.4版本及以上，使用$attrs和$listeners来实现的
**解决方案：解决方案：**
**首先创建父组件：** 父组件用于动态数据的绑定与事件的定义
<template>
<div>
<!--这里 :one和:two是向后代组件传递数据-->
<child1 :one="child1" :two="child2" @test1="onTest1" @test2="onTest2"></child1>
</div>
</template>
<script>
import Child1 from './Child.vue';
export default {
data () {
return {
child1:'lihua',
child2:'lignag',
parent: 0
};
},
components: {
'child1':Child1 //引入子组件
},
methods: {
onTest1 () {
console.log('child')
},
onTest2 (val) {
this.parent = val
}
}
}
</script>
子组件的写法： 通过设置v-bind=”$attrs” 和v-on=”$listeners”来充当中间人，
<template>
<div class="child-1">
<p>$attrs:{{$attrs['two']}}</p>
<hr>
<!-- 子组件中通过v-bind='$attrs'接受数据，通过$listeners接收事件 -->
<child2 v-bind="$attrs" v-on="$listeners"></child2>
</div>
</template>
<script>
import child2 from './Child2.vue';
export default {
props: ['one','two'], //可写可不写
data () {
return {
}
},
inheritAttrs: false, //父组件传递动态数据后，子组件的默认行为
components: {
child2
},
mounted () {
this.$emit('test1') //触发父组件方法的一种方式
this.$listeners.test2(123) //触发父组件方法的另一种方式
}
}
</script>
孙组件写法： 通过props或者$attrs和$listeners来获取父组件数据和事件。
<template>
<div class="child-2">
<p>props:{{one}}</p>
<p>props:{{two}}</p>
<p>$attrs: {{$attrs['one']}}</p>
<hr>
</div>
</template>
<script>
export default {
props:['one','two'], //接收父组件传递的数据，可以不写，通过$attrs来获取
weixin_38705558
- 粉丝: 4
- 资源: 944
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0