讲干货,不啰嗦,大家在做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>

能力有限,水平一般,错误之处,欢迎指正,感谢关注和评论!

Vue子父组件方法互调的更多相关文章

  1. vue子父组件通信

    之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法 模板: <div v-on:cli ...

  2. vue子父组件的通信

    Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0中去除了$broadcast和$dispatch方法. 1.父组件向子组件传值 a.app.vue父组件 <templ ...

  3. vue子父组件传值

    https://blog.csdn.net/weixin_38888773/article/details/81902789 https://blog.csdn.net/jsxiaoshu/artic ...

  4. Vue子->父组件传值

    父组件引入: Import Test from'' 父页面使用: <Test ref="test" @m1="m2"><Test/> 子 ...

  5. vue --子父组件传值

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( e ...

  6. vue 子父组件之间的通信,及在调用组件的地方

    这里是用了 element ui 你们也可以看一下管方的文档 http://element.eleme.io/#/zh-CN/component/installation 组件html <div ...

  7. Vue把父组件的方法传递给子组件调用(评论列表例子)

    Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...

  8. VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法

    vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...

  9. vue子组件获取父组件方法

    注:以下代码未使用esLint语法检查 父组件: <template> <div class="wrapper"> <cp_action @paren ...

随机推荐

  1. linux下使用SVN上传项目

    linux下使用SVN上传项目 摘自:https://blog.csdn.net/puppet_/article/details/78259591 2017年10月17日 13:51:33 puppe ...

  2. CRISP-DM

    CRISP-DM (cross-industry standard process for data mining), 即为"跨行业数据挖掘标准流程". 此KDD过程模型于1999 ...

  3. Node.js报错TypeError: Cannot read property 'isDirectory' of undefined

    截图如下: 原因如下:记住"./uploads" 后要加一个/ fs.stat("./uploads/" + files[i], function(err, s ...

  4. Robot:robot如何连接Oracle数据库(windows+linux)

    1.需要安装基础数据库 pip install robotframework-databaselibrary 2.下载并安装对应版本的cx_Oracle,注意要和Oracle版本.系统位数.pytho ...

  5. (1)、JEasyUI 之 Datagrid的Combobox 显示 textField 值的问题

    (1).JEasyUI 之datagrid的Combobox显示textField值的问题 官方的datagrid Demo Row Editing in DataGrid 中field 是否如下定义 ...

  6. 15.Git四种协议-本地协议(local)、HTTP协议、SSH协议、Git协议

    1.本地协议(loacl) 最基本的协议,其远程仓库其实就是硬盘内部的一个目录(例如D:\\project).常见于团队内的人对一个共享的文件系统(例如NFS)具有访问权限,或者多人共用一台电脑的情况 ...

  7. java、ruby、python、php等如何生成excel文档?

    excel在我们日常工作生活中会经常用到,通常我们都是用office软件去编写文档.但是对于格式一致的excel文档,如果还是使用人工完成,那绝不是我们软件工程师的姿态了~ 下面我就介绍一种方法,不需 ...

  8. javascript判断碰撞检测

    javascript判断碰撞检测 点与矩形的碰撞检测 <pre> /** * * @param x1 点 * @param y1 点 * @param x2 矩形view x * @par ...

  9. linux环境上 rocketmq 安装部署

    Rocketmq-简单部署   一.准备环境 1.系统:Centos7.3(无硬性要求) 2. jdk:1.8 3.maven:3.5(无硬性要求) 4.git 5.rocketmq 4.2 二.环境 ...

  10. Oracle 数据库 alert日志及trace日志的清理

    Oracle 数据库 alert日志及trace日志的清理 方案一: 暂停数据库的trace 登录到数据库 sqlplus / as sysdba 修改参数: SQL> alter system ...