问题：vue中子组件调用父组件的方法

通过v-on 监听 和$emit触发来实现：

1、在父组件中通过v-on 监听当前实例上的自定义事件。

2、在子组件中通过'$emit'触发当前实例上的自定义事件。

示例：

父组件：

`这是父组件`

子组件：

`这是子组件`

结果：

子组件会调用父组件的fatherMethod 方法，该并且会alert 弹出传递过去的参数：{"name":123}。

实际上原生事件是这样的v-on:click="xxxxxxx" ,此处click还可以是keyup等其他原生内置事件。本来的操作是需要手动去点击click或按键盘keyup去触发事件。以上述为例子，现在v-on:emitMethods不需要直接手动了，v-on:xxx的这个xxx动作由$emit去模拟人的手动。因此事件的本质是一样的。又因为xxxx不是原生内置事件(解释一下：原生内置事件就是浏览器内部预先设计好的，我们可以直接用。比如计时器setInterval( )与setTimeout( )就是内置好的方法)，所以称之为自定义事件。

父组件与子组件数据流的过程：

简单模式：

多层组件嵌套模式：

先有个印象吧，后续还继续探讨Vue组件,毕竟 数据双向绑定系统和组件系统是Vue的核心内容。理解了组件，对于任何框架的模块化开发，都得心应手。

iframe调用父页面方法_5.1 vue中子组件调用父组件的方法，务必理解自定义事件的重要性...相关推荐

layui 编辑页面没有等父页面值传入就渲染完了，导致父页面数据没有传入子页面
使用layui来做后台管理,遇到一个很奇葩的问题: 在list页面列出了所有的记录,然后点击编辑,弹出一个新页面来显示需要修改的字段,然后里面有几个checkbox,使用 body.find(&quo ...
iframe父页面与子页面之间的元素获取与方法调用
JS 父页面调用子页面子页面调用父页面元素 window.frames[iframe的name属性值]; ① window.parent.document.getElementById(&qu ...
iframe子页面调用父页面javascript函数的方法
1.iframe子页面调用父页面js函数子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
页面嵌套iframe怎么调用父页面的方法，子页面回调父页面函数方法
父页面要有此函数 //子页面回调此函数 IndexCallback = function() {console.log('我是父页面的方法') } 子页面回调父页面的方法 window.parent. ...
js/iframe 子页面调用父页面方法与父页面调用子页方法
博客转载于 https://blog.csdn.net/weixin_44512123/article/details/99698419 在做项目中都会存有主页面子页面.子页面嵌套中主页面中,主页面有 ...
vue父页面实时给子页面传值
实操笔记: 设置set this.DataList = []const varName='formObj' this[varName].PkIds && delete this[var ...
iframe子页面操作父页面
2019独角兽企业重金招聘Python工程师标准>>> 最近经常用到iframe,用的最多的就是在子页面中操作父页面的方法或变量等,总结了用到的几种方法,如下: var tableN ...
js刷新父页面的方法
1.父页面弹出窗口,关闭弹窗刷新父页面 window.parent.location.reload(); 2.父页面打开新的浏览器窗口,关闭新的浏览器窗口,刷新父页面的方法 window.opener ...
父组件给子组件传值方法_【Vue】小学生都能看懂的子父组件传值
Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,其中之一就是组件的传值. 搭建的框架目录结构一.父传子动图效果及源码父传子源码: 父组件: 子组件: 二.子传父动 ...

iframe调用父页面方法_5.1 vue中子组件调用父组件的方法，务必理解自定义事件的重要性...

问题：vue中子组件调用父组件的方法

`这是父组件`

`这是子组件`

父组件与子组件数据流的过程：

iframe调用父页面方法_5.1 vue中子组件调用父组件的方法，务必理解自定义事件的重要性...相关推荐

最新文章

热门文章