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将接收新数据。