关于vue父组件调用子组件的方法
作者:baby加油_ 时间:2024-04-09 10:47:43
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法
例:
子组件:
<template>
<div></div>
</template>
<script>
export default {
methods:{
childMethod(flag) {
console.log(flag)
}
},
created(){
}
}
</script>
父组件: 在子组件中加上ref即可通过this.$refs.ref.method调用
<template>
<div @click="parentMethod">
<children ref="child1"></children>
</div>
</template>
<script>
import children from 'components/children/children.vue'
export default {
data(){
return {
flag: true
}
},
components: {
'children': children
},
methods:{
parentMethod() {
console.log(this.$refs.child1) //返回的是一个vue对象,所以可以直接调用其方法
this.$refs.child1.childMethod(this.flag);
}
}
}
</script>
例子,兄弟组件间传递DOM数据,调用函数
写一个兄弟组件之间传递数据,父组件调用方法的案例:
第一个子组件cartcont,发射数据
this.$emit('cartadd', event.target);
父组件接收数据,并将数据,通过调用另一个子组件shopcart 的方法传递给另一个子组件shopcart
<v-cartcont :food="food" @cartadd='_drop'></v-cartcont>
<v-shopcart ref='shopcart'></v-shopcart>
_drop(target){
console.log('父组件接收数据')
this.$refs.shopcart.drop(target);
}
shopcart子组件的方法
drop(el){
console.log('调用另一个子组件的方法')
console.log(el)
}
来源:https://blog.csdn.net/qq_34664239/article/details/80386153
标签:vue,父组件,调用,子组件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2023-05-21 01:32:42
解决IDEA GIT记录无法查看提交文件的问题
2022-12-08 01:46:25
![](https://img.aspxhome.com/file/2023/1/120511_0s.png)
SQL2005日志收缩方法
2024-01-23 10:42:17
Python回调函数用法实例详解
2021-04-10 14:31:15
Python实现PS图像调整黑白效果示例
2022-08-06 09:15:13
![](https://img.aspxhome.com/file/2023/1/93781_0s.jpg)
发一个较复杂的字符串截取函数
2009-12-08 16:23:00
网页设计:巧用记事本编辑网页
2008-02-05 09:00:00
python绘制立方体的方法
2022-09-26 10:34:14
![](https://img.aspxhome.com/file/2023/7/109407_0s.jpg)
CentOS7 LNMP+phpmyadmin环境搭建 第三篇phpmyadmin安装
2023-10-17 03:23:18
![](https://img.aspxhome.com/file/2023/0/75060_0s.png)
python 实现aes256加密
2021-01-20 22:31:38
SQLSERVER查询所有数据库名,表名,和字段名的语句
2012-01-29 18:07:44
JavaScript中数组Array方法详解
2024-04-10 10:39:28
Python3 hashlib密码散列算法原理详解
2021-07-06 12:59:55
![](https://img.aspxhome.com/file/2023/9/65869_0s.png)
MySQL8.0安装中遇到的3个小错误总结
2024-01-26 04:56:06
![](https://img.aspxhome.com/file/2023/7/118167_0s.png)
HTML中的setCapture和releaseCapture使用介绍
2024-04-18 09:51:18
js中的window.open返回object的错误的解决方法
2024-04-17 09:52:27
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2021-01-15 14:45:25
![](https://img.aspxhome.com/file/2023/7/69587_0s.png)
国产化设备鲲鹏CentOS7上源码安装Python3.7的过程详解
2023-04-23 14:08:42
sqlserver 禁用触发器和启用触发器的语句
2024-01-19 21:38:17
用户不需要信息快餐
2009-02-25 12:34:00