Давайте изучим связь между компонентами VUE (14) с нуля

Связь между компонентами в основном включает связь между родительскими и дочерними компонентами и связь между родственными компонентами . Это полезно в недавнем проекте ручной практики, запишите его как памятку

Взаимодействие компонентов родитель-потомок

Родительские компоненты могут использовать настраиваемые свойства для обмена данными с дочерними компонентами props:["属性名"], а дочерние компоненты могут отправлять данные родительским компонентам через настраиваемые события. Взаимодействие родителей и детей можно легко реализовать с помощью настраиваемых атрибутов и настраиваемых событий.

• При изменении данных подкомпонент запускает пользовательское событие через this.$emit('имя функции', переданное значение)
• Событие @binding используется в родительском компоненте, а данные, передаваемые из дочернего компонента в родительский компонент, принимаются через val

Общение между братьями и сестрами

Использование родительских компонентов в качестве промежуточного ПО

Самый простой и грубый способ общения с простыми одноуровневыми компонентами - использовать два взаимодействия родитель-потомок для реализации связи между братьями.Дочерний компонент 1 отправляет данные родительскому компоненту через $emit, а родительский компонент получает данные через настраиваемые атрибуты. Данные передаются в подкомпонент 2.

Использовать шину событий

Шаги для использования

• Создайте модуль eventBus.js и поделитесь объектом экземпляра Vue (или определите новый объект шины и смонтируйте его в цепочке прототипов)

Vue.prototype.$bus = new Vue()

• В отправителе данных вызовите bus.$emit('имя события', данные для отправки), чтобы вызвать пользовательское событие.

this.$bus.$emit('getDetail', id)

• В приемнике данных вызовите bus.$on('имя события', функция обработчика события), чтобы зарегистрировать пользовательское событие.

  created () {
    
    
    this.$bus.$on('getDetail', res => {
    
    
      this.goodsId = res
      console.log(res)
    })
  }

Используйте VueX

1. Установите плагин:npm i vuex --save
2. Создать store.js

import Vue from 'vue'  
import Vuex from 'vuex'  
Vue.use(Vuex)  
  
export default new Vuex.Store({
    
      
  state:{
    
      
      queryId: '',
  },  
  mutations:{
    
      
    store_queryId(state, queryId) {
    
      
        state.queryId = queryId
    }
  }
})  

3. Представьте и поделитесь экземпляром в main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
    
    
    router,
    store,
    render: h => h(App)
  }).$mount('#app')

4. отправитель данных

this.$store.commit("store_queryId",queryId)

5. приемник данных

let queryId =  this.$store.state.queryId;