vue中子组件调用兄弟组件方法

 更新时间:2018年07月06日 10:26:12   作者:blankPage  
这篇文章主要介绍了vue中子组件调用兄弟组件方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

小计: 开发中遇到子组件需要调用兄弟组件中的方法,如下写个小demo记录下心得,如果你有好的方法,请到评论区域指教

父组件示例代码:

组件功能解析: 

通过$emit获取子组件事件,通过$ref调用子组件中事件,实现子组件二的click事件

调用兄弟组件一中的事件

<template>
 <div>
  <!-- 子组件1 -->
  <son1 ref="borther" :dataFromFather="dataFromFather"></son1>
  <!-- 子组件2 -->
  <son2 @triggerBrotherMethods="triggerBrotherMethods" :dataFromFather="dataFromFather"></son2>
 </div>
</template>

<script>
// 引入子组件一
import son1 from './son1'
// 引入子组件二
import son2 from './son2'

export default {
 data() {
  return {
   dataFromFather: []
  }
 },
 // 注册子组件
 components: {
  son1,
  son2
 },
 methods: {
  // 子组件2中click事件
  triggerBrotherMethods() {
   // 父组件通过$ref调用子组件1中的事件方法
   this.$refs.borther[0].bortherMethods()
  },
 }
}
</script>

<style lang="less" scoped>
/* .... */
</style>

子组件一

组件功能解析: 

加载父组件数据,进行业务操作

<template>
 <!-- 子组件son2 -->
 <div @click="bortherMethods">
  <!-- 父组件传值展示 -->
  {{dataFromFather}}
 </div>
</template>

<script>
export default {
 data() {
  return {
  }
 },
 props: ['dataFromFather'],
 methods: {
  // 兄弟组件中的按钮事件
  bortherMethods() {
   // 子组件事件方法
   ...
  },
 }
}
</script>

<style lang="less" scoped>
/* .... */
</style>

子组件二:

组件功能解析: 

加载父组件数据,通过click事件emit传给父组件

<template>
 <!-- 子组件son2 -->
 <div @click="triggerBrotherMethods">
  <!-- 父组件传值展示 -->
  {{dataFromFather}}
 </div>
</template>

<script>
export default {
 data() {
  return {
  }
 },
 props: ['dataFromFather'],
 methods: {
  // 触发兄弟组件中的按钮事件
  triggerBrotherMethods() {
   this.$emit('clickBrotherBtn', true)
  },
 }
}
</script>

<style lang="less" scoped>
/* .... */
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 解读Vue-loader的相关知识

    解读Vue-loader的相关知识

    这篇文章主要介绍了解读Vue-loader的相关知识,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue3配置路由ERROR in [eslint]报错问题及解决

    Vue3配置路由ERROR in [eslint]报错问题及解决

    这篇文章主要介绍了Vue3配置路由ERROR in [eslint]报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 基于vue 开发中出现警告问题去除方法

    基于vue 开发中出现警告问题去除方法

    下面小编就为大家分享一篇基于vue 开发中出现警告问题去除方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • 使用vue3实现简单的滑块组件

    使用vue3实现简单的滑块组件

    这篇文章主要给大家介绍一下如何使用vue3实现简单的滑块组件,文中有详细的代码示例讲解,具有一定的参考价值,感兴趣的小伙伴跟着小编一起来看看吧
    2023-08-08
  • 详解Vue 如何监听Array的变化

    详解Vue 如何监听Array的变化

    这篇文章主要介绍了详解Vue 如何监听Array的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • Vue自定义组件实现v-model双向数据绑定的方法

    Vue自定义组件实现v-model双向数据绑定的方法

    这篇文章主要介绍了Vue自定义组件实现v-model双向数据绑定的方法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-11-11
  • vue如何实现Json格式数据展示

    vue如何实现Json格式数据展示

    这篇文章主要介绍了vue如何实现Json格式数据展示,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Element-ui Image图片按需引入大图预览

    Element-ui Image图片按需引入大图预览

    这篇文章主要为大家介绍了Element-ui Image图片按需引入大图预览实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • vue3声明响应式状态使用(含ref,reactive,toRef(),toRefs()等)

    vue3声明响应式状态使用(含ref,reactive,toRef(),toRefs()等)

    这篇文章主要介绍了vue3声明响应式状态使用(含ref,reactive,toRef(),toRefs()等),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue动态组件component标签的用法大全

    Vue动态组件component标签的用法大全

    这篇文章主要介绍了Vue动态组件component标签的用法,在Vue中,可以通过component标签的is属性动态指定标签,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论