如何解决两个同级组件Vue js之间的数据传输问题
我有三个组件，其中一个是其他组件的父组件，我正试图在一个从talk到FollowedBrowser的事件中将其释放的同级兄弟之间传递一个名为LeftBar的对象然后通过prop从LeftBar传递到TalksList组件，之后TalksList发出另一个事件，并为LeftBar监听了一个时间，最后该组件重新定义了{ {1}}对象为空对象。
这是我的父组件talk。
LeftBar这是我的两个孩子：
<template>
<v-navigation-drawer width="25%" permanent clipped app light>
<talks-list v-if="inRoute('messages')" :talk="talk" @talkAdded="talkAdded()"/>
<template v-if="inRoute('messages')" v-slot:prepend>
<followed-browser @newTalk="addTalk($event)"/>
</template>
</v-navigation-drawer>
</template>
<script>
import FollowedBrowser from "./FollowedBrowser";
import TalksList from "./TalksList";
import { mapGetters } from "vuex";
export default {
data(){
return {
talk: {}
}
},components: {
FollowedBrowser,TalksList
},methods: {
addTalk(talk){
this.talk = talk;
},talkAdded(){
this.talk = {};
}
}
}
</script>
TalksList.vue <template>
<v-container class="my-0 px-5">
<v-list flat>
<v-list-item-group class="my-0">
<div class="ma-0 pa-0" v-for="(talk,index) in talks" :key="index">
<v-divider v-if="talk.divider"></v-divider>
<v-list-item v-else class="px-2" style="cursor: pointer">
<template>
<v-list-item-avatar>
<v-img :src="correctedImageUrl(talk.recipient)"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>
<span class="blue--text text--lighten-1">{{ completeName(talk.recipient) }}</span>
</v-list-item-title>
<v-list-item-subtitle>
<span>{{ talk.recipient.username }}</span>
</v-list-item-subtitle>
</v-list-item-content>
</template>
</v-list-item>
</div>
</v-list-item-group>
</v-list>
</v-container>
</template>
<script>
import axios from "axios";
export default {
data(){
return {
talks: []
}
},props: {
talk: {
type: Object,default: null,required: true
}
},watch: {
talk(val){
if(val){
this.talks.splice(0,1,val);
this.$emit("talkAdded");
}
}
}
}
</script>
FollowedBrowsed.vue}
在<template>
<div style="display: inline">
<v-dialog scrollable v-model="dialog" max-width="400px" max-height="500px">
<v-card :loading="loading">
<v-text-field dense outlined color="blue lighten-1" label="Nombre de usuario" class="px-5" append-icon="mdi-magnify" v-model="browsedUsername"/>
<v-divider></v-divider>
<v-card-text style="height: 300px;" class="px-2">
<v-list>
<v-list-item class="px-2" style="cursor: pointer" v-for="listUser in filteredFollowed" :key="listUser.id" @click.prevent="newTalk(listUser)">
<v-list-item-content>
<v-list-item-title>
<span class="blue--text text--lighten-1">{{ completeName(listUser) }}</span>
</v-list-item-title>
<v-list-item-subtitle>
<span>{{ listUser.username }}</span>
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card-text>
</v-card>
</v-dialog>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import axios from "axios";
export default {
data(){
return {
browsedUsername: "",loading: false,dialog: false,skeleton: true,followed: []
}
},watch: {
dialog(dialog){
if(!dialog){
this.browsedUsername = "";
this.item = null;
}
}
},computed: {
...mapGetters({
authenticated: "auth/authenticated",user: "auth/user"
}),filteredFollowed(){
return this.followed.filter((user) => {
return user.username.toLowerCase().indexOf(this.browsedUsername.toLowerCase()) !== -1;
})
}
},mounted(){
axios.get("all_followers_followed/followed")
.then((response) => {
if(response.data){
this.followed = response.data;
this.skeleton = false;
}
})
.catch((error) => {
console.log(error)
});
},methods: {
async newTalk(user){
this.loading = "blue lighten-1";
await axios.post("messages/new_talk",{recipient_id: user.id})
.then((response) => {
if(response.data){
this.dialog = false;
this.$emit("newTalk",{
messages_number: 0,recipient: user,sender: this.user
});
}
})
.catch((error) => {
console.log(error);
});
}
}
组件内调用newTalk方法时，会发出FollowedBrowser事件，但此后我的屏幕冻结，就像应用程序处于无限循环内一样，我不知道为什么。我省略了一些我认为不相关的代码。
有人可以帮助我吗？
谢谢。
解决方法
我解决了...很简单，我只需要在talk内获得TalksList道具的副本，就在watch内放一个：
watch: {
talk(val){
if(val){
if(this.talks.length){
this.talks.unshift({ divider: true });
}
let buffer = new Object();
let talk = new Object();
buffer.data = val;
talk = buffer.data;
this.talks.unshift(talk);
}
}
},版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
