У меня есть компонент A и он имеет 2 дочерних компонента C1 и C2. В компонент C1 есть функция, с помощью которой вы получаете данные из источника, такого же в C2. Для C1
<template>
</template>
<script>
export default {
url = 'abc.com';
name: 'c',
data () {
return {
users:'',
}},
methods: {
getData: function () {
$.get(url, function( data ) {
this.users = data;
var ab = this.users.ab ;
var pq = this.users.pq ;
)};
}}
}
</script>
Для C2
<template>
</template>
<script>
export default {
url = 'abc.com';
name: 'c',
data () {
return {
users:'',
}},
methods: {
getData: function () {
$.get(url, function( data ) {
this.users = data;
var cd = this.users.cd ;
var rs = this.users.rs ;
)};
}}
}
</script>
И у меня есть еще один компонент D
<template>
</template>
<script>
export default {
data () {
return {
}},
methods: {
showDataABCD: function () {
// here I want to access all data of users object of C1 and C2]
// especially ab, cd
},
showDataPQRS: function () {
// here I want to access all data of users object of C1 and C2
//especially PQ, RS
}
}
</script>
Внутри этого D-компонента мне нужно получить доступ к объектам этих двух компонентов. Могу ли я использовать состояние или любой другой способ?
Существует множество способов достижения вашей цели.
Однако, если вы хотите инициировать поиск из компонента D, вы можете, в первую очередь, добавить пользовательский event-listener (eventbus. $ On...) на C1 и C2. (вы также можете передать функцию обратного вызова)
Вы можете адаптировать шаблон, который я описал здесь. Vue.js редактировать переменные в динамических компонентах
Просто передайте объекты, которые вы хотите использовать в качестве реквизита от родителя. Затем, когда дети испускают обновленные данные, пусть родитель устанавливает его, а поток данных доходит до его детей с "общим состоянием".
Данные будут передавать родительский → дочерний → дочернее обновление → родитель получает обновление → все дети обновлены.