[英]Vue js - pass data within two components in the same level
I have data that I need to pass from one component1
to another component2
. 我有需要从一个
component1
传递到另一个component2
。
I don't use vuex or router . 我不使用vuex或路由器 。
Components tree: 组件树:
-Parent
--Component1
--Component2
From first component1
I make ajax request, retrieving info and pushing to data. 从第一个
component1
我发出ajax请求,检索信息并推送到数据。
board: [1,2,3,4,5]
And I need access that retrieved data in component2
我需要访问
component2
中检索到的数据
Can I do It without vuex or router ? 我可以不用vuex或路由器吗?
Thank you :) 谢谢 :)
You could emit an event to parent from component1
having as parameters the updated board
and in the parent one receive that and pass it through props
to component2
您可以从
component1
向父component1
发出一个事件,该component1
具有作为参数的更新board
并且在父component2
接收该事件并将其通过props
传递给component2
In component1
: 在
component1
:
this.$emit("sendToComp2",this.board);
in the parent
component : 在
parent
组件中:
<template>
<component1 @sendToComp2="sendTo2"/>
...
<component2 :boards="boards" />
....
</template>
data:{
boards:[]
},
methods:{
sendTo2(boards){
this.boards=boards
}
}
component2
should have property called boards
component2
应该具有名为boards
属性
props:["boards"]
The idea is that you have a Parent component which has at least two child components. 这个想法是你有一个父组件,它至少有两个子组件。 The child components can trigger an event in the parent component 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.
因此,如果Component1需要向Component2发送消息,它可以向Parent触发事件,然后Parent触发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.com/vue-components-communication/ 资料来源: https : //flaviocopes.com/vue-components-communication/
You have to follow the "common ancestor pattern". 你必须遵循“共同的祖先模式”。
Consider the following Parent
component: 考虑以下
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>
The ChildOne
component will receive a function as a prop
named onData
that should be called when the ajax call is finished. ChildOne
组件将接收一个名为onData
的prop
函数,该函数应在ajax调用完成时调用。 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. 当
onData
被执行时, dataToChildTwo
将被更新, ChildTwo
将接收新数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.