Расскажите о связи между компонентами Vue.js.

Vue.js Vuex MVVM

написать впереди

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

Оригинальный адрес статьи:GitHub.com/ответы на….

В процессе обучения в Vue были добавлены китайские аннотации.GitHub.com/ответы на…, я надеюсь, что это может быть полезно другим друзьям, которые хотят изучить исходный код Vue.

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

Что такое компонент Vue?

Компоненты — одна из самых мощных функций Vue.js. Компоненты могут расширять элементы HTML, инкапсулируя многократно используемый код. На высоком уровне компонент — это настраиваемый элемент, к которому компилятор Vue.js добавляет специальные функции. В некоторых случаях компоненты также могут быть в виде нативных HTML-элементов, дополненных атрибутом is.




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

Родительский компонент взаимодействует с дочерним компонентом

Способ 1: реквизит

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

Шаблон vue родительского компонента

<template>
    <child :msg="message"></child>
</template>

<script>

import child from './child.vue';

export default {
    components: {
        child
    },
    data () {
        return {
            message: 'father message';
        }
    }
}
</script>

Шаблон vue дочернего компонента child.vue

<template>
    <div>{{msg}}</div>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    }
}
</script>


Способ 2. Используйте $children

использовать$childrenДочерние компоненты могут быть доступны в родительских компонентах.




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


Способ 1: Использованиеvue событие

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

Шаблон vue родительского компонента

<template>
    <child @msgFunc="func"></child>
</template>

<script>

import child from './child.vue';

export default {
    components: {
        child
    },
    methods: {
        func (msg) {
            console.log(msg);
        }
    }
}
</script>

Шаблон vue дочернего компонента child.vue

<template>
    <button @click="handleClick">点我</button>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    },
    methods () {
        handleClick () {
            //........
            this.$emit('msgFunc');
        }
    }
}
</script>


Способ 2. Измените данные родительского компонента, изменив реквизиты, переданные родительским компонентом.

Этот метод можно использовать только тогда, когда родительский компонент передает ссылочную переменную, а литеральные переменные не могут достичь соответствующего эффекта. Поскольку переменная drink в конечном итоге указывает на один и тот же адрес памяти, будь то данные в родительском компоненте или данные в свойствах, полученных дочерним компонентом, изменение данных свойств в дочернем компоненте изменяет данные родительского компонента.

Однако делать это не рекомендуется, и не рекомендуется напрямую изменять значение реквизита.Если данные используются для модификации отображения, я часто помещаю их в данные в фактической разработке и использую, когда это необходимо. быть переданы обратно родительскому компоненту.Событие возвращает данные. Таким образом, компоненты остаются независимыми и разъединенными, и поток данных не будет ненормально хаотичным из-за использования одних и тех же данных.Цель модификации данных достигается только путем передачи данных через определенный интерфейс, а состояние внутренних данных управляется специальными данными.


Способ 3: используйте $parent

использовать$parentМожет получить доступ к данным родительского компонента.




Передача данных между компонентами, не являющимися родительскими и дочерними, и компонентами-братами.

Связь между компонентами, не являющимися родительскими и дочерними, официально рекомендованная Vue.Используйте экземпляр Vue в качестве центральной шины событий.

Внутри Vue есть механизм событий, вы можете обратиться кисходный код.

Метод $on используется для прослушивания события.

$emit используется для запуска события.

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();

/*监听事件*/
event.$on('eventName', (val) => {
    //......do something
});

/*触发事件*/
event.$emit('eventName', 'this is a message.');




Многоуровневая связь между родительскими и дочерними компонентами:

В Vue1.0 реализованы методы $broadcast и $dispatch для трансляции (или отправки) дочернему компоненту (или родительскому компоненту), и когда дочерний компонент (или родительский компонент) прослушивает событие и возвращает значение true, он будет быть отправлены дочернему компоненту (или родительскому компоненту).Компоненты уровня дедушки продолжают транслировать (или отправлять) события. Но этот метод был удален в Vue2.0.

Я изучал библиотеку компонентов Ele.me с открытым исходным кодом доelementКогда я обнаружил, что они повторно реализовали методы вещания и отправки и представили их в виде миксинов, подробности см.«Поговорим о трансляции и отправке библиотеки компонентов элементов». Но он немного отличается от двух методов Vue1.0. Эти два метода реализуют функцию трансляции событий компонентам-потомкам и диспетчеризации событий многоуровневым родительским компонентам. Но это не событие, транслируемое в широком смысле, ему нужно указать commentName для трансляции (отправки) событий на указанный компонент имени компонента.

Фактически, внутренняя реализация этих двух методов по-прежнему использует $parent и $children для обхода дочерних узлов или запроса родительских узлов уровень за уровнем.При доступе к указанному имени компонента вызывается $emit для запуска указанного события.




Комплексное управление данными одностраничных приложений

Когда приложение достаточно сложное, используйтеvuexОсуществлять управление данными.

о

Автор: Ран Мо

Электронная почта: answerhuto@gmail.com или answerhuto@126.com

Github: github.com/answershuto

Блог:answershuto.github.io/

Знать домашнюю страницу:ууууууу. chi.com/people/grass-…

Знать столбец:zhuanlan.zhihu.com/ranmo

Самородки:Талант /user/289926…

Ос Китай:no.OSCHINA.net/U/3161824/no…

Пожалуйста, указывайте источник при перепечатке, спасибо.

Добро пожаловать, чтобы обратить внимание на мой общедоступный номер

Категории