vue父组件调用子组件属性,vue父组件调用子组件方法返回值
本文主要介绍了vue实现父组件获取子组件或属性值的方法的详细讲解，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
父组件获取子组件的方法或属性值。这里主要用的是vue的$ref。父组件获取子组件中的变量。案例1:点击父组件的按钮操作子组件显示案例列表2:获取子组件数据中的变量。
父组件获取子组件方法或属性值
vue的本质是每一块只负责自己的工作，更容易维护。
这里主要使用了vue的$ref
在通用标签中使用时，主要功能是获取dom节点，执行一些dom操作。在子组件上使用时，它可用于获取子组件的属性。那么下面我们要实现的就是如何在父组件上使用子组件的方法
目标：我需要在父组件上实现一个控制子组件的弹出窗口，通过参数判断显示哪些内容。
首先很容易想到绑定一个click事件，携带一个参数，获取子组件的属性，这样我就没有在这个父组件中控制子组件的开关，而是获取了子组件的方法或者属性，让子组件自己控制开关。
//下面是子组件
popup ref=popup/popup
//绑定click事件，并携带参数。
div class= item-box @ click= show pop( teacher )
//定义点击事件
showPop(事件){
//获取子组件的属性/方法，这里是获取弹出子组件的show方法，它带有参数。
这个。$refs.popup.show(事件)；
},
在子组件中，您需要定义方法，控制弹出内容的显示，并保存传递的参数。
//控制弹出窗口的显示和隐藏
div v-show=showPopup
！-关闭按钮，点击直接将showPopup定义为false -
div class= close popup @ click= show popup=false /div
！教师人数
//通过判断类型值来控制显示哪个弹出内容。
老师v-if=type==老师 /老师
学生v-else-if=type==学生 /学生
营业额v-其他/营业额
/div
//定义数据中的默认值
data(){
返回{
showPopup: false，
类型：“”
}
},
//最后，在控制弹出窗口显示的方法中定义show方法。
方法：{
显示(类型){
this.type=type
this.showPopup=true
}
}
就是这样。每个组件只负责我需要做的事情，不会影响其他组件，维护起来更容易。
父组件获取子组件中的变量
在vue项目的日常开发中，不可避免的会将功能组件分离，这样结构就会有父子组价、兄弟组件等。但这将涉及不同组件需要相互使用的有价值的问题。
之前已经说过父组件可以操作子组件，通过ref传递值，今天我们就来仔细看看。
案例一：点击父组件的按钮，操作子组件显示
注意：可以通过获取id/class来操作，这里就不介绍这种方法了。至于jquery，在vue中要慎用。
简介：这里子组件绑定了ref属性，用引号命名，然后父组件可以借此操作子组件的元素。$参考文献。名称改变其风格等。
模板
div class=DbSource-box
El-button type= primary icon= class= add BTN @ click= add dbsource()新建/el-button
d b-source-add ref= add alert v-on:init= init /d b-source-add
/div
/模板
脚本
从导入DbSourceAdd./components/db source manager/db source add ；
导出默认值{
名称： DbSourceManager ，
组件：{DbSourceAdd}，
方法：{
//点击添加按钮，弹出新数据源的弹出框。
addDbSource(){
这个。$ refs . add alert . $ El . style . display= block ；
},
}
}
/脚本
案列二：获取子组件data中的变量
父组件：
在这里，通过将ref属性绑定到子组件，引号中的命名被定制，然后父组件可以通过这个获得子组件中的值。$参考文献。姓名。变量名。
模板
div class=DbSource-box
El-button type= primary icon= class= selectbtn @ click= deleteselectdbsource()批量删除/el-button
d b-source-table ref= getSelectData :Data= Data v-on:init= init /d b-source-table
/div
/模板
脚本
从导入DbSourceTable./components/db源管理器/db源表；
导出默认值{
名称： DbSourceManager ，
组件：{DbSourceTable}，
方法：{
//删除选中的数据源（批量删除)
deleteSelectDbSource(){
console.log(这个参考文献。getselectdata。多选)
},
}
}
/脚本
子组件：
模板
div class=table-box
/div
/模板
脚本
导出默认值{
名称： DbSourceTable ，
道具：[数据],
data(){
返回{
多重选择：[],
页面大小：3,
currpage: 1，
currId:" "
}
}
/脚本
好了，以上就是父组件获取子组件的值并且操作子组件的方法。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。