vue子组件调用父组件函数,vue子组件使用父组件方法

　　这篇文章主要介绍了某视频剪辑软件子组件调用父组件方法案例详解，本篇文章通过简要的案例，讲解了该项技术的了解与使用，以下就是详细内容，需要的朋友可以参考下

一、直接在子组件中通过this.$parent.event来调用父组件的方法

　　！-父组件-

　　模板

　　差异

　　孩子/孩子

　　/div

　　/模板

　　脚本

　　从" ~/组件/dam/child "导入子级；

　　导出默认值{

　　组件：{

　　儿童

　　},

　　方法：{

　　fatherMethod () {

　　console.log(测试);

　　}

　　}

　　};

　　/脚本

　　！-子组件-

　　模板

　　差异

　　button @click=childMethod()点击/按钮

　　/div

　　/模板

　　脚本

　　导出默认值{

　　方法：{

　　childMethod() {

　　这个$家长。父方法()；

　　}

　　}

　　};

　　/脚本

二、在子组件里用$emit向父组件触发一个事件，父组件监听这个事件

　　！-父组件-

　　模板

　　差异

　　子@父方法=父方法/子

　　/div

　　/模板

　　脚本

　　从" ~/组件/dam/child "导入子级；

　　导出默认值{

　　组件：{

　　儿童

　　},

　　方法：{

　　fatherMethod () {

　　console.log(测试);

　　}

　　}

　　};

　　/脚本

　　！-子组件-

　　模板

　　差异

　　button @click=childMethod()点击/按钮

　　/div

　　/模板

　　脚本

　　导出默认值{

　　方法：{

　　childMethod () {

　　这个emit(父方法)；

　　}

　　}

　　};

　　/脚本

三、父组件把方法传入子组件中，在子组件里直接调用这个方法

　　！-父组件-

　　模板

　　差异

　　子：父方法=父方法/子

　　/div

　　/模板

　　脚本

　　从" ~/组件/dam/child "导入子级；

　　导出默认值{

　　组件：{

　　儿童

　　},

　　方法：{

　　fatherMethod () {

　　console.log(测试);

　　}

　　}

　　};

　　/脚本

　　！-子组件-

　　模板

　　差异

　　button @click=childMethod()点击/按钮

　　/div

　　/模板

　　脚本

　　导出默认值{

　　道具：{

　　父方法：{

　　类型：功能，

　　默认值：空

　　}

　　},

　　方法：{

　　childMethod () {

　　if (this.fatherMethod) {

　　这个。父方法()；

　　}

　　}

　　}

　　};

　　/脚本

　　到此这篇关于某视频剪辑软件子组件调用父组件方法案例详解的文章就介绍到这了，更多相关某视频剪辑软件子组件调用父组件方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。