埋坑一： vue中子元件呼叫兄弟元件方法

blankPage發表於2018-07-05
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>

相關文章