Vue子父组件方法互调
2019-08-14 10:17:51来源:博客园 阅读 ()
讲干货,不啰嗦,大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况,现做一下总结,希望对大家有所帮助。
父组件调用子组件方法:
1.设置子组件的ref,父组件通过this.$refs.xxx.method_name
(data)调用子组件方法,data参数可选
父组件:
<template> <div>
<h1>我是父组件</h1> <child ref="childname"></child> </div> </template> <script> import child from '~/components/child'; export default { components: { child }, methods: { fatherMethod(data) this.$refs.childname.childMethod(data); console.log('调用子组件方法'); } } }; </script>
子组件:
<template> <div> <h1>我是子组件</h1> </div> </template> <script> export default { methods: { childMethod(data) { console.log(‘我是子组件方法’) } } }; </script>
子组件调用父组件方法:
1.在子组件中通过this.$parent.event来调用父组件的方法,data参数可选
父组件:
<template> <div> <h1>我是父组件</h1> <child></child> </div> </template> <script> import child from '~/components/child'; export default { components: { child }, methods: { fatherMethod(data) { console.log('我是父组件方法'); } } }; </script>
子组件:
<template> <div> <h1>我是子组件</h1> <button @click="childMethod(data)">点击</button> </div> </template> <script> export default { methods: { childMethod() { this.$parent.fatherMethod(data); console.log('调用父组件方法') } } }; </script>
2.在子组件里用$emit
向父组件触发一个事件,父组件监听这个事件,data参数可选
父组件:
<template> <div> <h1>我是父组件</h1> <child @fatherMethod="fatherMethod"></child> </div> </template> <script> import child from '~/components/child'; export default { components: { child }, methods: { fatherMethod(data) { console.log('我是父组件方法'); } } }; </script>
子组件:
<template> <div> <h1>我是子组件</h1> <button @click="childMethod(data)">点击</button> </div> </template> <script> export default { methods: { childMethod(data) { this.$emit('fatherMethod',data); console.log('调用父组件方法') } } }; </script>
3.父组件通过props把方法传入子组件中,在子组件里直接调用这个方法,data参数可选
父组件:
<template> <div> <h1>我是父组件</h1> <child :fatherMethod="fatherMethod"></child> </div> </template> <script> import child from '~/components/child'; export default { components: { child }, methods: { fatherMethod(data) { console.log('我是父组件方法'); } } }; </script>
子组件:
<template> <div> <h1>我是子组件</h1> <button @click="childMethod(data)">点击</button> </div> </template> <script> export default { props: { fatherMethod: { type: Function, default: null } }, methods: { childMethod(data) { if (this.fatherMethod) { this.fatherMethod(data);
console.log('调用父组件传递的方法') } } } }; </script>
其他调用方法:
1.因为最终所有组件都会渲染成真实的Dom元素,所以可以通过js或jquery,获取Dom元素对象,通过模拟点击的方式触发元素绑定的方法,通过本地Cookie、localStorage或sessionStorage做参数缓存,实现值传递。此方法不限于子父组件,只要组件位于同一页面都可使用,但因为不符合vue规范,并非特殊情况不建议使用
组件A:
<template> <div> <h1>我是组件A</h1> <button id='btn' @click='methodA()'>点我</button> </div> </template> <script> export default { methods: { methodA() {
var parameter= localStorage.getItem('parameter'); console.log('我是组件A方法'); } } }; </script>
组件B:
<template> <div> <h1>我是组件B</h1> <button @click='methodB(data)'>点我</button> </div> </template> <script> export default { methods: { methodB(data) { localStorage.setItem('parameter',data); $('#btn').click();//模拟按钮点击 console.log('模拟点击按钮,触发A组件方法'); } } }; </script>
能力有限,水平一般,错误之处,欢迎指正,感谢关注和评论!
原文链接:https://www.cnblogs.com/wwlstc/p/11224596.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- js实现翻页后保持checkbox选中状态的实现方法 2020-03-25
- NiftyCube实现圆角边框的方法 2020-03-20
- 根据分辨率调用css文件的方法 2020-03-19
- JS简单去除数组中重复项的方法 2020-03-16
- vue.js开发环境搭建教程 2020-03-16
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash