Связь между компонентами Vue ☎️

Vue.js

Отношения между людьми сложны и нуждаются в поддержании, поэтому неизбежны телефонные звонки.

Как давно вы звонили?

Как долго вы были без звонка?

Вы помните свой рингтон на телефоне? ? ? ?

Папа звонит сыну ☎️

Родительский компонент реализует входящие данные с помощью переменной v-bind.

// 父组件
<Child :name="name" :clickFn="handleClick"/>

Дочерний компонент принимает данные, переданные родительским компонентом, реализуя реквизиты над параметрами.

props принимают данные ограничений, четыре способа перечислены ниже:

// 方式1：直接传递变量名，不做任何的类型约束以及值约束
props:['name','handleClick']


// 方式2：传递变量名 + 类型的约束
props:{
  name: String,
  handleClick: Function
}

// 方式3 ：传递变量名 + 多个类型的约束
props:{
  name: [String, Number]
}

// 方式4：传递变量名 + 类型的约束 + 默认值
props:{ 
  name:{
    type:String,
    default: 'zhangshan'
  },
  handleClick:{
     type: Function,
     default: ()=>{}
  }
}

А чтобы обеспечить однострочный поток данных, это не приведет к тому, что другие подкомпоненты будут использовать данные, переданные родительским компонентом.Необходимо, чтобы подкомпонент не мог модифицировать значение данных реквизита (программа будет также сообщите нам, сообщив об ошибке).

Сын звонит папе ☎️

Метод $emit реализован на прототипе vue, который используется для отправки событий.

Дочерний компонент будет отправлять события родительскому компоненту через $emit, а родительский компонент будет прослушивать события, отправленные дочерним компонентом в виде v-on

// 子组件
<button @click="$emit('onChildClick')">click me </button>

// 父组件
<Child @onChildClick=“onChildClick”/>

При необходимости параметры передачи могут быть написаны непосредственно во втором параметре $ emit в

// 子组件
<button @click="$emit('onChildClick', item)">click me </button>

// 父组件
<Child @onChildClick=“onChildClick”/>

onChildClick(item){
  console.log('我接受到了子组件传递过来的参数啦！', item)
}

Папа взял на себя инициативу взять трубку сына ☎️

refэто атрибут, который можно установить в теге подкомпонента, мы можем передатьthis.$refs.childRefЧтобы получить экземпляр подкомпонента, чтобы вызывать свойства или методы подкомпонента из экземпляра!

<Child ref="childRef"/>

this.$refs.childRef.onChildClick()

В дополнение к ref вы также можете использовать$childrenЧтобы получить экземпляр подкомпонента, чтобы вызывать свойства или методы подкомпонента из экземпляра!

this.$children[0] // 第一个孩子组件

Сын взял на себя инициативу взять трубку отца ☎️

В подкомпонентах вы можете передатьthis.$parentЧтобы получить экземпляр родительского компонента, чтобы вызывать свойства или методы дочернего компонента из экземпляра! Использование такое же, как описано выше.

Примечание: у ребенка много детей, а у отца только один.

Дедушка зовет внука ☎️

Дедушка немного устал звонить внуку, дедушка не знал номера телефона внука, поэтому он обнаружил, что сначала нужно позвонить отцу, а потом внуку! 😢

Дедушка говорит очень медленно, он может сказать только одно слово за раз,

Компонент grandpa передает параметры слой за слоем без изменений.

// 爷爷
<Parent :name="name" :age="age" :gender=“gender”/>

// 父亲
<Child :name="name" :age="age" :gender=“gender”/>
props:['name', 'age', 'gender']

// 孙子
<div>{{name}} - {{age}} - {{gender}}</div>
props:['name', 'age', 'gender']

Внучка Янъян🐑 самая умная и милая лоли в нашей семье!

Янъян больше не мог этого выносить, поэтому нашел диктофон, записал все слова, сказанные дедом, и отправил диктофон отцу:

v-bind="$props"Передача всех реквизитов, немного снижающая нагрузку

// 爷爷
<Parent :name="name" :age="age" :gender=gender/>

// 爸爸 props接受 && props一起传
<Child v-bind="$props"/>
props:['name', 'age', 'gender']

// 儿子 props接受
<div>{{name}} - {{age}} - {{gender}}</div>
props:['name', 'age', 'gender']

Но я обнаружил, что отцу нужно разобрать все слова в диктофоне, а затем передать их сыну одно за другим.

Янъян больше не может терпеть, скажи папе, тебе не нужно слушать слова на диктофоне, прежде чем сказать сыну, тебе просто нужно отдать дедушкин диктофон прямо своему сыну!

v-bind="$attrs"Одна из функций , заключается в том, что можно передавать значения, которых нет в реквизитах,

Родительскому компоненту не нужно ни принимать параметры, передаваемые родительским компонентом, один за другим, ни передавать параметры один за другим дочернему компоненту!

// 爷爷
<Parent :name="name" :age="age" :gender=gender/>

// 父亲
<Child v-bind="$attrs"/>

// 儿子 props接受
<div>{{name}} - {{age}} - {{gender}}</div>
props:['name', 'age', 'gender']

// 儿子 props 不接受
<div>{{$attrs.name}} - {{$attrs.age}} - {{$attrs.gender}}</div>

Внук дедушка под названием ☎️

Внук первым положил телефон$emit('onChildClick')Позвонил папе, папа разобрал, что собирался сказать внук, а потом позвонил дедушке@onChildClick="$emit('onChildClick')"

// 儿子
<button @click="$emit('onChildClick')" @click="$emit('onChildClick1')">click me </button>

// 爸爸
<Child @onChildClick="$emit('onChildClick')"  @onChildClick1="$emit('onChildClick1')"/>

// 爷爷
<Parent @onChildClick="console.log('我终于收到了孙子辈的点击事件了！')"  @onChildClick1="console.log('我终于收到了孙子辈的点击事件了1！')"/>

Янъян сказал, папа, ты должен передать телефон прямо дедушке! Зачем ты подслушиваешь чужие звонки!

v-on="$listeners"События могут быть упакованы 📦

// 儿子
<button @click="$emit('onChildClick')">click me </button>

// 爸爸
<Child v-on=“$listeners”/>
  
// 爷爷
<Parent @onChildClick="console.log('我终于收到了孙子辈的点击事件了！')"/>

Цинь Ши Хуан (предок) позвал меня ☎️

Когда уровень нашего компонента глубже, A -> B -> C -> D -> E -> F, вышеуказанные методы неприменимы, мы можем использовать предоставление и внедрение для передачи данных между уровнями.

Родительский компонент должен только объявитьprovide, взаимодействуют в своих подкомпонентах, внучатых компонентах, пра-внучатых компонентах и ​​других компонентах, которые могут формировать восходящие и нисходящие отношения, независимо от того, насколько глубокиinjectпосетитьproviderданные в .

// 最上面的组件 elForm
provide(){
   return {elForm:this}  
}

// 最下面的组件 elFormItem
inject:['elForm']

(Хулува) Шуйва звонит Хуове ☎️

Усталый подход: props + emit + on

Компонент Brother 1 излучает -> родительский компонент включен -> реквизиты компонента Brother 2

Ожидаемая практика: компонент Brother 1 генерирует событие, компонент Brother 2 — событие.

event bus

Глобальная шина EventBus, хотя в некоторых примерах и не рекомендуется, является очень изящным и простым способом обмена данными между компонентами.

1. Определите пустой экземпляр Vue в качестве центральной шины событий.

2. Компонент определяет методы для запуска пользовательских событий.

3. Компонент B прослушивает хук

var EventBus = new Vue();

this.$bus.$emit('call',{...});

this.$bus.$on('call',($event) => {...})

vuex

Vuex — это приложение, разработанное специально для Vue.js.режим управления состоянием. Он использует централизованное хранилище для управления состоянием всех компонентов приложения и использует соответствующие правила, чтобы гарантировать предсказуемое изменение состояния.

export default new Vuex.Store({
  state: {
    userInfo:{}
  },
  mutations: { // commit
    updateUserInfo (state,Object) {
       state.userInfo= Object
    }
  },
  actions: { // dispatch 副作用
    getUserInfo(context){
    		// 1.发送http请求，拿到用户信息数据
    		const userInfo = http()
    		
    		// 2.通过commit发送mutation里面的方法修改state
    		context.commit('updateUserInfo', userInfo)
    }
  },
  getters:{
    userInfo: state.userInfo
  }
})

Суммировать

Существует множество способов связи между компонентами:

  1. props реализует нисходящую передачу данных

  2. emitandemit and on осуществляет выпуск и мониторинг данных

  3. ref,ref, parent, $children может получить экземпляр компонента

  4. props,props, attrs, $listeners могут упаковывать данные/события📦Транспорт

  5. eventbus и vuex могут обмениваться данными между компонентами

И есть еще какие-то средства связи, о которых не написано...

наконец

Наконец, эта статья также является статьей о поиске друзей, приходите и звоните мне! ☎️

Категории