1.props传值
父组件中:
<!-- 更新广告 组件使用位置 --> <UpdateAdvert :updateAdvertFormVisible="updateAdvertFormVisible" @closeUpdateAdvert="closeUpdateAdvert" :updateAdvertInfo="updateAdvertInfo" ></UpdateAdvert>
<!-- 子组件点击关闭时需要触发的函数 --> closeUpdateAdvert() { this.updateAdvertFormVisible = false; this.updateAdvertInfo = []; },
子组件中:
<!-- 接收父组件传过来的数据-->
props: ["updateAdvertFormVisible",'updateAdvertInfo'],
<!-- 因为变量定义在父组件中,子组件无法改变父组件的值。所以需要触发父组件的方法改变值-->
closeUpdateAdvert() { this.$emit('closeUpdateAdvert') },
2.refs控制
父组件中:
<!-- 组件使用位置 -->
<editRedEnvelop ref="edit-red-envelop" @getPacketsData='getPacketsData'></editRedEnvelop>
<!-- 传值位置 --> handleEditBtn(index,row){ this.$refs["edit-red-envelop"].editRedPacketsFormVisible = true //变量 this.$refs["edit-red-envelop"].envelopInfo(row) //函数 },
子组件中:
<!-- 声明变量 -->
editRedPacketsFormVisible: false,
<!-- 声明函数接收传过来的值 -->
envelopInfo(row){}
3.$children
3.1当父组件有且仅有一个子组件时
// dialog为子组件声明的变量 this.$children[0].dialog = true
3.2 当父组件中有多个组件时,如图:
由于组件包裹在了el-card中,所以需要先获取到el-card,然后再获取组件,直接获取为undefined。代码如下:
// 循环遍历children,根据data值获取所需要的组件 this.$children[0].$children.forEach(function(ele){ console.log(ele.screenName); if(ele.dialog) { ele.dialog = true } })
如果在子组件使用$parent获取父组件的值,也要注意层级的关系。以上图为例:
组件AddAccount想要获取父组件的值时,需要使用this.$parent.$parent。第一个$parent获取到的是el-card,第二个$parent才是template。
this.$parent.$parent.accountList
更多内容请参考:https://www.cnblogs.com/dhui/p/12926794.html