Vue js - 在同一級別的兩個組件內傳遞數據

Question

我有需要從一個component1傳遞到另一個component2 。

我不使用vuex或路由器 。

組件樹：

-Parent
--Component1
--Component2

從第一個component1我發出ajax請求，檢索信息並推送到數據。

board: [1,2,3,4,5]

我需要訪問component2中檢索到的數據

我可以不用vuex或路由器嗎？

謝謝 ：）

Answer 1

您可以從component1向父component1發出一個事件，該component1具有作為參數的更新board並且在父component2接收該事件並將其通過props傳遞給component2

在component1 ：

this.$emit("sendToComp2",this.board);

在parent組件中：

  <template>
  <component1  @sendToComp2="sendTo2"/>
  ...
  <component2 :boards="boards" />
  ....
  </template>


  data:{
    boards:[]
    },
  methods:{
       sendTo2(boards){
        this.boards=boards
          }
      }

component2應該具有名為boards屬性

  props:["boards"]

Answer 2

這個想法是你有一個父組件，它至少有兩個子組件。 子組件可以觸發父組件中的事件以及父組件之間的事件。 因此，如果Component1需要向Component2發送消息，它可以向Parent觸發事件，然后Parent觸發Component2的事件。 例：

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething')
    }
  }
}
</script>

和

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleClickInParent: function() {
      //...
    }
  }
}
</script>

資料來源： https ： //flaviocopes.com/vue-components-communication/

Answer 3

你必須遵循“共同的祖先模式”。

考慮以下Parent組件：

<template>
  <div>
    <child-one :onData="onDataFromChildOne"></child-one>
    <child-two :newData="dataToChildTwo"></child-two>
  </div>
</template>

<script>
  export default {
    name: "Parent",
    data() {
      return {
        dataToChildTwo: null
      }
    },
    methods: {
      onDataFromChildOne(data) {
        this.dataToChildTwo = data;
      }
    }
  }
</script>

ChildOne組件將接收一個名為onData的prop函數，該函數應在ajax調用完成時調用。 然后：

<script>
  import axios from 'axios';

  export default {
    name: "ChildOne",
    props: ['onData'],
    beforeMount() {
      axios
        .get('/data')
        .then(res => {
          this.onData(res.data);
        });
    }
  }
</script>

當onData被執行時， dataToChildTwo將被更新， ChildTwo將接收新數據。