Vue $emit $refs子父组件间方法的调用实例

 更新时间:2018年09月12日 10:57:05   作者:superlovelei  
今天小编就为大家分享一篇Vue $emit $refs子父组件间方法的调用实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

1、$emit

子组件调用父组件的方法并传递数据

注意:子组件标签中的时间也不区分大小写要用“-”隔开

子组件:

<template>
 <button @click="emitEvent">点击我</button>
</template>
<script>
 export default {
 data() {
  return {
  msg: "我是子组件中的数据"
  }
 },
 methods: {
  emitEvent(){
  this.$emit('my-event', this.msg)
  //通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。
  }
 }
 }
</script>

父组件:

<template>
 <div id="app">
 <child-a @my-event="getMyEvent"></child-a>
 <!--父组件中通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值-->
 </div>
</template>
<script>
 import ChildA from './components/child.vue'
 export default {
 components: {
  ChildA
 },
 methods: {
  getMyEvent(msg){
   console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
  }
 }
 }
</script>

2、$refs

父组件调用子组件的方法,可以传递数据

注意:子组件标签中的时间也不区分大小写要用“-”隔开

父组件:

<template>
 <div id="app">
 <child-a ref="child"></child-a>
 <!--用ref给子组件起个名字-->
 <button @click="getMyEvent">点击父组件</button>
 </div>
</template>
<script>
 import ChildA from './components/child.vue'
 export default {
 components: {
  ChildA
 },
 data() {
  return {
  msg: "我是父组件中的数据"
  }
 },
 methods: {
  getMyEvent(){
   this.$refs.child.emitEvent(this.msg);
   //调用子组件的方法,child是上边ref起的名字,emitEvent是子组件的方法。
  }
 }
 }
</script>

子组件:

<template>
 <button>点击我</button>
</template>
<script>
 export default {
 methods: {
  emitEvent(msg){
  console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据
  }
 }
 }
</script>

以上这篇Vue $emit $refs子父组件间方法的调用实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue2利用Bus.js如何实现非父子组件通信详解

    vue2利用Bus.js如何实现非父子组件通信详解

    这篇文章主要给大家介绍了关于vue2利用Bus.js如何实现非父子组件通信的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧。
    2017-08-08
  • Vue.js实现时间轴功能

    Vue.js实现时间轴功能

    这篇文章主要为大家详细介绍了Vue.js实现时间轴功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue3集成electron的过程

    vue3集成electron的过程

    本文详细介绍了如何在Vue3项目中集成Electron,包括安装electron和electron-builder两个依赖,以及配置.npmrc文件和手动修改镜像源的方法,整个过程详细记录了从创建项目、安装依赖、修改配置、到最终打包部署的每一步
    2024-10-10
  • Vue实现动态圆环百分比进度条

    Vue实现动态圆环百分比进度条

    这篇文章主要为大家详细介绍了Vue实现动态圆环百分比进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue.js打包之后可能会遇到的坑!

    vue.js打包之后可能会遇到的坑!

    这篇文章主要给大家介绍了关于vue.js打包之后可能会遇到的一些坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-06-06
  • Vue下拉框加分页搜索功能的实现方法

    Vue下拉框加分页搜索功能的实现方法

    开发任务中有这样一个需求,下拉框中需要展示超过5000条数据,甚至更多,这数据量直接整个页面卡死了,就想到在下拉框中加分页,下面小编通过实例代码介绍下Vue下拉框加分页搜索功能的实现,感兴趣的朋友一起看看吧
    2022-11-11
  • Vue.js 单页面多路由区域操作的实例详解

    Vue.js 单页面多路由区域操作的实例详解

    这篇文章主要介绍了 Vue.js 单页面多路由区域操作的实例详解的相关资料,需要的朋友可以参考下
    2017-07-07
  • vue截图转base64转文件File异步获取方式

    vue截图转base64转文件File异步获取方式

    这篇文章主要介绍了vue截图转base64转文件File异步获取方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 移动端滑动切换组件封装 vue-swiper-router实例详解

    移动端滑动切换组件封装 vue-swiper-router实例详解

    这篇文章主要介绍了移动端滑动切换组件封装 vue-swiper-router实例详解,需要的朋友可以参考下
    2018-11-11
  • vue3中使用pinia(大菠萝)状态管理仓库的项目实践

    vue3中使用pinia(大菠萝)状态管理仓库的项目实践

    本文主要介绍了vue3中使用pinia(大菠萝)状态管理仓库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论