Question

我有需要从一个operator[]传递到另一个component1的数据。

我不使用 vuex 或 router 。

组件树：

component2

从第一个-Parent --Component1 --Component2开始，我发出ajax请求，检索信息并推送到数据。

component1

我需要访问board: [1,2,3,4,5]

中检索到的数据

我可以不用 vuex 或 router 吗？

谢谢：）

Answer 1

您可以从component1向父级发送事件，并以更新后的board作为参数，并在父级中接收事件并将其通过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

这个想法是，您有一个Parent组件，其中至少有两个子组件。子组件可以在父组件中以及从父组件到子组件触发事件。因此，如果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

您必须遵循“共同祖先模式”。

考虑以下button_state = PIND & ((1 << PD2) | (1 << PD3)); // Mask out pins of interest switch (button_state) { case 0: // Nothing pressed .... break; case 1 << PD2: // One button pressed .... break; case 1 << PD3: // Another button pressed .... break; case (1 << PD2) | (1 << PD3): // Both pressed .... break;组件：

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的{{1}}函数，该函数应在ajax调用完成时被调用。然后：

prop

执行onData后，<script> import axios from 'axios'; export default { name: "ChildOne", props: ['onData'], beforeMount() { axios .get('/data') .then(res => { this.onData(res.data); }); } } </script>将被更新，onData将收到新数据。

Vue JS-在同一级别的两个组件中传递数据

3 个答案: