使用vue怎么在子组件中调用兄弟组件

本篇文章为大家展示了使用vue怎么在子组件中调用兄弟组件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

成都创新互联服务项目包括乌拉特后网站建设、乌拉特后网站制作、乌拉特后网页制作以及乌拉特后网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，乌拉特后网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到乌拉特后省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

父组件示例代码：

组件功能解析： 

通过$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怎么在子组件中调用兄弟组件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

网站标题：使用vue怎么在子组件中调用兄弟组件
转载注明：https://www.cdcxhl.com/article14/ghooge.html

成都网站建设公司_创新互联，为您提供建站公司、网站改版、动态网站、品牌网站建设、移动网站建设、标签优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联