admin 管理员组

文章数量: 1086019

I have data that I need to pass from one ponent1 to another ponent2.

I don't use vuex or router.

Components tree:

-Parent
--Component1
--Component2

From first ponent1 I make ajax request, retrieving info and pushing to data.

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

And I need access that retrieved data in ponent2

Can I do It without vuex or router ?

Thank you :)

I have data that I need to pass from one ponent1 to another ponent2.

I don't use vuex or router.

Components tree:

-Parent
--Component1
--Component2

From first ponent1 I make ajax request, retrieving info and pushing to data.

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

And I need access that retrieved data in ponent2

Can I do It without vuex or router ?

Thank you :)

  • javascript
  • vue.js
  • vuejs2
  • vue-ponent
Share Improve this question edited Nov 12, 2018 at 1:36 Boussadjra Brahim 1 asked Nov 12, 2018 at 1:10 Medf101Medf101 1071 silver badge5 bronze badges 3
  • Are parent child ponents? Or ponents of brother-in-law? – Hamilton Gabriel Commented Nov 12, 2018 at 1:24
  • Component1 and Component2 is childs of Parent ponent – Medf101 Commented Nov 12, 2018 at 1:27
  • solved the problem? – Hamilton Gabriel Commented Nov 12, 2018 at 1:38
Add a ment  | 

3 Answers 3

Reset to default 7

You could emit an event to parent from ponent1 having as parameters the updated board and in the parent one receive that and pass it through props to ponent2

In ponent1 :

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

in the parent ponent :

  <template>
  <ponent1  @sendToComp2="sendTo2"/>
  ...
  <ponent2 :boards="boards" />
  ....
  </template>


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

ponent2 should have property called boards

  props:["boards"]

The idea is that you have a Parent ponent which has at least two child ponents. The child ponents can trigger an event in the parent ponent and from Parent to child. So, if Component1 needs to send a message to Component2, it can trigger an event to Parent and then Parent trigger an event for Component2. Example:

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

and 

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

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

Source: https://flaviocopes./vue-ponents-munication/

You have to follow the "mon ancestor pattern".

Consider the following Parent ponent:

<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>

The ChildOne ponent will receive a function as a prop named onData that should be called when the ajax call is finished. Then:

<script>
  import axios from 'axios';

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

When onData gets executed, dataToChildTwo will be updated and ChildTwo will receive the new data.

本文标签： javascriptVue jspass data within two components in the same levelStack Overflow

版权声明：本文标题：javascript - Vue js - pass data within two components in the same level - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744070178a2528337.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。