Vue父组件调用子组件的方法
2023-09-27 14:24:14 时间
vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用,例如:
父组件:
<template> <div @click="fatherMethod"> <child ref="child"></child> </div> </template> <script> import child from '~/components/dam/child.vue'; export default { components: { child }, methods: { fatherMethod() {this.$refs.child.childMethods(); } } }; </script>
子组件:
<template> <div>{{name}}</div> </template> <script> export default { data() { return { name: '测试' }; }, methods: { childMethods() { console.log(this.name); } } }; </script>
在父组件中, this.$refs.child 返回的是一个vue实例,可以直接调用这个实例的方法,嗯,就酱~
相关文章
- 【Vue 快速入门系列】姓名案例几种实现方法(插值语法、函数语法、计算属性的使用、计算属性原理剖析)
- 在Vue中关闭Eslint 的方法
- Vue格式化日期或时间
- vue中使用refs出现undefined的解决方法
- 微信小程序校园生活小助手+后台管理系统|前后分离VUE
- vue-router报错Uncaught (in promise)及解决方法
- Vue子组件调用父组件的方法
- vue打包后 点击index.html 找不到静态资源的解决方法
- vue上传gitlab 指定不上传的文件的方法
- Vue 父组件调用子组件的方法
- vue引入的方法
- vue 项目代码初始化
- vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
- vue中 表头th 合并单元格,且表格列数不定的动态渲染方法
- ASP.NET Core使用Vue.js的项目配置及组合输出方法
- ASP.NET Core Action接收VUE中Axios提交Form表单参数方法及示例代码
- Vue开发中常见问题记录
- 关于Vue.js 使用v-cloak后仍显示变量的解决方法
- vue实例方法
- Vue.js 中,7种定义组件模板的方法 | Codementor
- 在Vue中通过自定义指令获取元素
- 掌握了AST,再也不怕被问babel,vue编译,Prettier等原理
- vue——视频播放插件vue-video-player的使用
- vue——列表页进详情页,第一次很慢,第二次就很快问题及解决方法
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航