埋坑一： vue中子组件挪用兄弟组件要领

2023年10月19日 184次阅读 来源: blankPage

小计： 开辟中碰到子组件须要挪用兄弟组件中的要领，以下写个小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>
    原文作者：blankPage
    原文地址: https://segmentfault.com/a/1190000015493752
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞