Полностью раскрыта коммуникация компонентов Vue (всего 7 глав)

Эта статья была написана год назад. Сегодня я решил выложить его на всеобщее обозрение. Для чего я напишу весь секрет взаимодействия компонентов vue, потому что неважно, какой фреймворк какой компонентный режим. Компоненты — это ядро, и только тогда, когда компоненты написаны, их можно исправить. Проект также прошел гладко. Контента много, и за год я не вижу изменений в коммуникационной части компонентов. Ничто не устарело. Я надеюсь, что все должны помочь

Урок 01: Дайте вам причину не изучать Vue

Что такое Вью

Vue — это проект Yuxi You, прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других тяжеловесных фреймворков, Vue использует инкрементальную разработку снизу вверх. Основная библиотека Vue ориентирована только на уровень представления, который не только легко начать, но и легко интегрировать со сторонними библиотеками или существующими проектами. С другой стороны, в сочетании с однофайловыми компонентами и библиотеками, поддерживаемыми экосистемой Vue, Vue также полностью способен работать со сложными одностраничными приложениями.

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

Пожалуйста, назовите причину не изучать Vue

Если я должен назвать причину не изучать Vue, может быть, его метод написания слишком удобен... Вы также можете подумать, что он слишком много черпает из него, и нет яркого пятна, тогда я могу только сказать, что реализовано то же самое.Удобные, лаконичные туториалы и документы API подключены ко всей системе разработки, что вполне соответствует развитию китайского рынка - большие бизнес-изменения, быстрые требования к версиям, частые изменения требований, низкие затраты на обучение ... Напротив, он также имеет эффективные функции, которые объединяют систему компонентов и виртуальный DOM.

Чему вы можете научиться, прочитав эту серию уроков?

Освоение Vue в основном заключается в правильном понимании руководства и глубоком освоении API. Использование , нужно не только уметь им пользоваться, но и, что более важно, научиться прописывать правильное лекарство.Ключ в том, чтобы использовать максимально краткий, правильный и разумный код в любом сценарии. Только при определенном уровне реального боевого опыта проекта и фактического боевого опыта библиотеки компонентов с API и учебными пособиями его можно использовать с легкостью.

Когда запустился Vue2.0, я прочитал серию лекций по курсу Vue по Nuggets, от основ до Vuex и, наконец, до реальной борьбы с библиотекой компонентов. В течение этого периода, благодаря большому количеству реальных проектов и библиотек компонентов, благодаря пошаговому обзору, глубокому пониманию документов API и тестовому моделированию, были подведены итоги правильного использования и общих требований к некоторым реальным сценариям. чтобы можно было избежать обходных путей в развитии. , меньше копать.

Кроме того, Vue также узнайте, что

При разработке Vue нам нужно не только точно использовать API, но и сочетать новый синтаксис es6 для организации кода с более глубокими и мощными новыми функциями, что также является стандартом следующего поколения Javascript:

• команды let и const
• Разрушение присвоения переменных
• расширение строк
• расширение функции
• расширение массива
• расширение объекта
• Объект обещания
• асинхронная функция

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

Преимущества этого курса

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

Контент, представленный в этом курсе, является последней версией Vue.Можно сказать, что это уникальный набор руководств.Он не только сочетает в себе официальные руководства и API, но и рассказывает вам, как организовать код в каких сценариях и избежать ненужных ям . . .

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

Схема курса следующая

• 01 Начните путешествие с Vue
• 02 Гибкие данные, жесткие реквизиты
• 03 $on,$emit, отношение v-on
• 04 .sync - возвращение короля, грядет миссия v-model
• 05 $attrs,$listenersглубокая компонентная связь
• 06 Правильная связь между смарт-компонентами и кукольными компонентами
• 07 Центральные сообщения об инцидентах, о которых вы не знали

Идеи дизайна для этого урока

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

Либо учебник, который может написать исходный код, полезен для вас, либо это не очень простой учебник, который вам не поможет. Не каждый может стать крупным игроком и попасть в R&D команду крупной компании, большинство программистов сталкиваются с развитием на уровне бизнеса. Поэтому, как закрепиться на рынке и быстро взять проект в свои руки, большинство людей должны приложить свои усилия.

Что нужно сделать, чтобы изучить этот курс?

Студенты, которые изучают этот курс, должны иметь определенное представление об основных знаниях Html и JavaScript, понимать основные новые функции es6 и понимать основы использования npm и node.

рекомендовать:

Введение учителя Руан Ифэн в ES6

Не тратьте время на чтение чего-либо еще, если вы можете остановиться и прочитать всю книгу, это лучше, чем любая другая книга по es6, почему? Цивилизацию, как и Vue, легко понять.

В то же время, изучая этот учебник, попробуйте запустить официальный сайт Vue на китайском языке в сочетании с примерами API, которые вы можете понять.

cn.vuejs.org/

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

Начните свое путешествие во Vue

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

vue-devtool

Раньше, когда Дом эксплуатировался, мы использовали дабгер-брейкпойнты для поиска ошибок и вбивания базовых данных. Дабгер больше не полезен. Только наблюдая за изменениями данных, мы можем точно определить местонахождение данных и данных о неправильных идентификационных изменениях. требуемое событие выполняется.

Просто используйте магазин, чтобы ввести vue, чтобы установить его самостоятельно.

vue-cli

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

Перейдите на официальный сайт Node.js и загрузите установочный пакет Node.js;

Для того, чтобы быстро скачать инсталляционный пакет, перейдите наИсточник ТаобаоВойдите в терминал кли;

运行npm install -g cnpm --registry=https://registry.npm.taobao.org
 全局安装 vue-cli
$ npm install --global vue-cli
 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

Откройте папку, все примеры в этом туториале пройдены Папка компонентов для определения одного компонента, для разработки приложений SPA более интуитивно понятно использовать один файл .vue, папка может быть страницей или компонентом;

Начиная знакомство с Vue, возьмите список дел, чтобы попробовать его магию, интерактивную привязку данных и поведения через экземпляры и шаблоны Vue;

Как каждая опция экземпляра соответствует определенному значению шаблона один к одному, посредством привязки данных и событий, для простой и эффективной реализации приложения todoList. По сравнению с Juqery, эпохой холодного оружия управления Dom, разработчикам кажется, что он полностью изменил модель, сохранив удобство и адаптируемость написания HTML, а также предоставляя синтаксис JSX.На официальном сайте Vue говорится, что это прогрессивный Box plus, метод написания также асимптотичен, так что разработчики могут использовать его без опасений, а модель Vue, управляемая данными, предоставляет большое количество API, каждый API отвечает за свои обязанности, будь то параметр экземпляра или атрибут экземпляра. подобны частям хозяйственного магазина.Только когда каждая функция API используется правильно и в нужном месте, организация кода проекта Vue и последующее обслуживание могут быть такими же простыми, как ладонь. До появления компонентного инжиниринга сложность реализации бизнеса не была самой сложной, а головной болью была череда проблем типа итерации, рефакторинга и повторного использования последующих версий кода.Надеюсь, что через простой todo-list приложение, вы можете по-новому понять революцию в разработке интерфейса!

<template>
   <div>
     <input type="text" v-model.trim="msg"  @keyup.enter="push">
      <ul>
        <li v-for="(item,index) in list" :key="index" @click="deleteItem(index)">
          {{index}} {{item.name}}
        </li>
      </ul>
   </div>
</template>

<script>
  export default {
    name: 'todo-list',
    data () {
      return {
         msg: "",
         list: []
      }
    },
    methods: {
      push () {
         this.list.push({name:this.msg})
         this.msg = ""
      },
      deleteItem (index) {
        this.list.splice(index,1)
      }
    }
  }
</script>

В этой главе показано, как удушающе просто работает среда Vue, управляемая данными, в этом демонстрационном примере.

Приложение todo-list объединяет два события, два данных завершены!

С помощью шаблона Html в Template можно четко наблюдать информацию о привязке, привязку данных и постоянные изменения:

• Сообщение в v-модели привязано к данным, хранящимся в данных столбца экземпляра.
• @keyup.enter="push" отслеживает событие keyup клавиатуры и использует модификатор ввода для отслеживания нажатия клавиши ввода. Когда вызывается функция push в методах, данные объекта добавляются ко всему списку списка
• Зациклить данные во всем списке с помощью инструкции v-for и зациклить соответствующее количество узлов.
• При нажатии на каждый узел выполняется событие deleteItem для удаления соответствующего узла.

Чем отличается предыдущая операция записи DOM от текущей, управляемой данными?

• Для рендеринга данных мы будем передавать сторонний механизм шаблонов, такой как artTemplate, Jade и т. д., и добавлять его к корневому элементу после рендеринга.
• Vue просто перебирает все соответствующие узлы с помощью инструкции v-for.Ранее на Html писался только шаблон цикла.

---

• Чтобы выполнить событие, вам нужно получить элемент DOM, добавить событие addEventlistener к элементу DOM, а затем выполнить функцию.
• Vue напрямую привязывает события к элементам, которым нужны события, через встроенный в шаблон шаблон. Просто выполните v-on, чтобы объединить события, которые вам нужно связать. Поддерживаются все собственные события.

---

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

---

• Все функции, которые должны быть выполнены, будь то функция, которую нужно выполнить по событию, или функция, которую нужно вызвать при инкапсуляции, объявляются в функции Если это прописано в теге скрипта, то объем кода большой, а также будут конфликты имен переменных и неточные методы позиционирования.
• Vue использует параметр «Методы» для специального выполнения функций для событий и инкапсуляции функций, которые необходимо вызвать.Так же, как мусорное ведро, есть точная и вставная позиция.Вам нужно найти функцию для выполнения и вызова, и вы можете непосредственно найти его.Методы вариант.

---

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

---

Вышеприведенное — это всего лишь пример, подытоженный простой демонстрацией todo-list.Упомянутые в статье функции — это лишь некоторые из функциональных преимуществ, и есть много функций, которые могут ускорить путь разработки. Основное внимание уделяется модели, управляемой данными.Пока вы владеете связью между компонентами, это эквивалентно тому, что вы держите большую часть страны в своих руках, потому что все основано на режимах связи компонентов и структурном использовании.

Руководство по следующему курсу:

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

Урок 02: Гибкие данные, жесткие реквизиты

управляемый событиями

С точки зрения клиентской среды, управляемой данными, неизбежно быть неотделимой от управляемой событиями, которая в определенной степени компенсирует отсутствие управляемой данными.dom操作Время обычно работает так:

Найдите узел, которым нужно управлять с помощью определенного селектора -> добавьте соответствующий прослушиватель событий к узлу.

В ответ на действия пользователя эффект следующий:

Пользователь выполняет событие (щелчок, ввод, возврат и т. д.) -> вызов JavaScript для изменения узла

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

управляемый данными

Прочитайте шаблон, одновременно получите данные и установите уровень абстракции виртуальной машины (модель представления) -> заполните страницу

Быть осторожным,MVVMСоответствует трем слоям,M - Model, который можно просто понимать как уровень данных;V - View, под которым можно понимать представление или веб-интерфейс;VM - ViewModel, уровень абстракции, который можно рассматривать как абстрактный объект данных на уровне V простыми словами, и который можно комбинировать сV 和 M 双向互动(Общая реализация основана на двусторонней привязке, а двусторонняя привязка обрабатывается по-разному в разных платформах).

Пользователь выполняет операцию -> обратная связь с ВМ для обработки (что может привести к изменениям Модели) -> изменяется уровень ВМ, и данные в соответствующем месте страницы обновляются напрямую через отношение привязки

Это можно понять просто: data-driven не управляет узлами, а напрямую обновляет страницы через виртуальный абстрактный слой данных. В основном из-за этого фреймворки, управляемые данными, могут работать быстрее (потому что нет необходимости выбрасывать узлы) и могут применяться к крупным проектам.

Vue-шаблон

Вью через{{}}связать текстовые узлы,dataдинамические данные иPropsСтатические данные выполняют отношение отображения, когдаdataсвойства в илиpropsАтрибуты в приведенных выше изменениях изменены.Каждые данные в двух предыдущих — это данные, необходимые для операции поведения, или данные, которые должны отображаться в представлении шаблона.Как только один из атрибутов изменяется, все связанные операции поведения и данные отображаются на шаблон данных Синхронизируя изменения в то же время, эта модель, управляемая данными, упрощает разработку крупномасштабных приложений. Пока данные и код организованы разумно, в последующем они не будут выглядеть мягкими.

Что такое динамические данные, что такое статические реквизиты данных

Та же точка

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

разница

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

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

Что еще более важно, понимание одностороннего потока данных,propsДанные передаются через родительский компонент или данные компонента более высокого уровня или литералы, и прямые операции не позволяют изменять данные в соответствующих экземплярах.propsданные, но необходимо изменить данные в источнике доставки другими способами.

опция данных

Когда экземпляр создан,Vueпоместит данные системы реагирования вdata选项中, при изменении значения этих свойств представление будет «откликаться», то есть соответствие будет обновлено до нового значения. Код поведения начальной строки также будет сопоставлен с системой ответа.

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

Инициализировать карту

<template>
   <div>
      <p v-if='boolean'>true</p>
      <p v-for='value in obj'>{{value}}</p>
      <p v-for='item in list'>{{item}}</p>
      <p>{{StringMsg}}</p>
      <p>{{NumberMsg}}</p>
   </div>
</template>
<script>
   export default {
     data () {
       return  {
          obj : {a:'1',b:'2',c:'3'},
          list:['a','b','c'],
          boolean : true,
          StringMsg : 'hello vue',
          NumberMsg : 2.4,
       }
     }
   }
</script>

При запуске кода вdata选项В стандарте определено пять типов данных.{{}}рендерить, подтверждаяdata选项могу定义任何数据类型.

Представление и сопоставление данных

<template>
   <div>
      <p>{{StringMsg}}</p>
      <p>{{NumberMsg}}</p>
      <button @click='changeData'>改变数据</button>
   </div>
</template>
<script>
   export default {
     data () {
       return  {
          StringMsg : 'hello vue',
          NumberMsg : 2.4
       }
     },
     methods: {
       changeData () {
         this.StringMsg = 2.4;
         this. NumberMsg = 'hello vue'
       }
     }
   }
</script>

Каждый файл .vue является экземпляром, и в данных определены два типа данных:

• Тип строки
• Тип номера

Также определяет событие changeData.

При запуске кодаdata选项вошелVue的响应系统внутри,model层view层

无论值和类形都可以进行随意转换

<template>
   <div>
      <p>{{StringMsg}}</p>
      <p>{{NumberMsg}}</p>
      <button @click='changeData'>改变数据</button>
      <button @click='findData'>查看数据</button>
   </div>
</template>
<script>
   export default {
     data () {
       return  {
          StringMsg : 'hello vue',
          NumberMsg : 2.4
       }
     },
     methods: {
       changeData () {
         this.StringMsg = 2.4;
         this.NumberMsg = 'hello vue'
       },
       findData () {
         console.log(`StringMsg: ${this.StringMsg}`)
         console.log(`NumberMsg: ${this.NumberMsg}`)
       }
     }
   }
</script>

this.StringMsg //=> 2.4

this.NumberMsg //=>'hello vue'

• Данные в опции данных являются гибкими
• Любой тип данных может быть определен
• Также может быть изменен на любой тип данных
• Когда данные изменяются, данные, связанные с представлением и поведением, будут изменяться синхронно.

props

использоватьpropsОбласть передачи данных изолирована, они передаются от родительского компонента через шаблон, если вы хотите получить данные от родительского компонента, вам нужно передатьprops选项получать.

Объявление, которое должен отображать дочерний компонент, получает данные, переданные родительским компонентом.数量,类型,初始值.

Простой прием можно получить в виде массива.

родительский компонент

<template>
   <div>
      <demo :msg='msgData' :math = 'mathData' ></demo>
   </div>
</template>
<script>
import Demo from './Demo.vue'
   export default {
     data () {
       return  {
          msgData:'从父组件接收来的数据',
          mathData : 2
       }
     },
     components : {
       Demo
     }
   }
</script>

Подсборка

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

<script>
export default {
  name: 'demo',
  props: [ 'msg' , 'math'],
}
</script>

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

То же самое делается в родительском компоненте в шаблоне дочернего компонентаv-bindПередать полученные данные в дочерний компонент, который необходимо отобразить.

грамматика: :== v-bind (инкапсулированный синтаксический сахар) :msg = msgData

• Первый параметр msg должен иметь то же имя, что и свойства дочернего компонента.
• msgData — это данные в родительском компоненте, которые необходимо передать в дочернюю группу.

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

родительский компонент

<template>
   <div>
      <demo :fn = 'myFunction'  ></demo>
   </div>
</template>
<script>
import Demo from './Demo.vue'
   export default {
     components : {
       Demo
     },
     methods: {
       myFunction () {
           console.log('vue')
       }
     }
   }
</script>

Подсборка

<template>
  <div>
     <button @click='fn'>按钮</button>
  </div>
</template>

<script>
export default {
  name: 'demo',
  props: [ 'fn' ],
}
</script>

Точно так же родительский компонент также может передаватьfunction, функция myFunction, переданная родительским компонентом, также может выполняться в дочернем компоненте.

Буквенный синтаксис и динамический синтаксис

Для буквального синтаксиса и динамического синтаксиса, в чем разница между добавлением и отсутствием добавления v-bind при передаче данных из шаблона родительского компонента в дочерний компонент, и какие неправильные слова вызовут путаницу.

Что означает v-bind при передаче данных в шаблоне дочернего компонента?

v-bind:msg = 'msg'Передача данных через v-bind и переданные данные не являются литералом, парсинг в двойных кавычках一个表达式, а также данные и методы, определенные в экземпляре (фактически ссылающиеся на переменную)».

msg='11111'В режиме без v-bind можно передать только один литерал, и этот литерал ограничен типом String, строковым типом.

Уведомление:

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

Буквенное обозначение, за исключением типов String

Когда вы хотите передать данные через литералы, если вы хотите передать非String类型,долженpropsдобавить перед именемv-bind, который ищется внутри экземпляра, если на стороне экземпляра нет этого свойства и метода,则默认为对应的数据类型.

:msg='11111' //number :msg='true' //bootlean :msg='()=>{console.log(1)} //function :msg='{a:1} //object

Проблема определения реквизита шаблона дочернего компонента

Когда версия 1.0

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

Уведомление

Поскольку в документе все еще есть это предложение, после теста можно использовать как строковый шаблон, Camelcased (тип горба), так и кебаб-кейс.

предложение

Для наглядности норматив по-прежнему рекомендует кебаб-кейс (разделенный тире).

Сокращенная передача объекта

Атомизация реквизита может сделать общую логику кода и показать интерфейс, который должен передавать данные, очень понятным, но она также может передать реквизиты, которые дочерний компонент должен получить как объект в родительском компоненте.

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

родительский компонент

<template>
   <div>
      <demo v-bind= 'msg'  ></demo>
   </div>
</template>
<script>
import Demo from './Demo.vue'
   export default {
     components : {
       Demo
     },
     data () {
       return {
         msg : {a:1,b:2}
       }
     }
   }
</script>

Подсборка

<template>
  <div>
     <button>按钮</button>
  </div>
</template>

<script>
export default {
  name: 'demo',
  props: ['a','b'],
  created () {
     console.log(this.a)
     console.log(this.b)
  },
}
</script>

<demo v-bind= 'msg' ></demo>Что происходит внутри?

внутри шаблона дочернего компонента进行了一个封装, расширение это то же самое, что и принцип распыления реквизита

<demo :a='a' :b='b' ></demo>

В общем, рекомендуется использовать вторую, атомизацию реквизита.

Неизменяемый реквизит

В опции данных текущий экземпляр (измененный в текущем компоненте) может быть任意改变data选项里的数据,VueКогда передача данных основана на数据单向流动, дочерний компонент не может изменить какие-либо свойства свойств в текущем экземпляре и должен уведомить родительский компонент, чтобы изменить соответствующее значение и изменить его снова.

Измените данные реквизита напрямую

<template>
  <div>
     <button @click='changeProps'>按钮</button>
  </div>
</template>

<script>
export default {
  name: 'demo',
  props: ['msg'],
  methods: {
    changeProps () {
      this.msg = 'new msg'
    }
  }
}
</script>

Предупреждение появится при изменении реквизита напрямую

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "msg"

защита данных不可控性, прямые изменения, которые не могут быть отображены, данные, переданные из родительского компонента, и данные, полученные реквизитами дочерней сборки, также синхронно реагируют.Как только данные, переданные родительским компонентом, изменяются, значение данных, полученное реквизитом, также будет изменять.

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

Изменения родительского компонента

<template>
   <div>
      <demo :msg = 'msg'  ></demo>
      <button @click='msg = "new vue"'>按钮</button>
   </div>
</template>
<script>
import Demo from './Demo.vue'
   export default {
     components : {
       Demo
     },
     data () {
       return {
         msg : 'vue'
       }
     }
   }
</script>

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

Разовый пропуск, переходные изменения

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

Переход к опции данных

props: ['msg'],
data: function () {
  return { myMsg: this.msg }
}

Получить реквизиты msg через myMsg в опции данных data, что эквивалентно операции присваивания myMsg = msg не только для получения данных myMsg, но и для изменения данных myMsg.

this.myMsg = 'new Vue' myMsg изменится соответствующим образом.

Разовая доставка, обработка фильтром

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

props:['msg']
computed : {
   computedMsg () {
       return this.msg + 1
   }
}

Уведомление: В JavaScript объекты и массивы являются ссылочными типами, указывающими на одно и то же пространство памяти.Если prop является объектом или массивом, его изменение внутри дочернего компонента повлияет на состояние родительского компонента. Не фильтруйте данные ссылочного типа, передаваемые родительским компонентом.

Следующее руководство

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

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

Урок 03:Взаимосвязь между emit и v-on

описать семью$emit,$onОтношение

Каждый экземпляр Vue реализует интерфейс событий:

• использовать$on(eventName)прослушать событие
• использовать$emit(eventName)триггерное событие

если поставитьVueкак семья (эквивалентно одномуcomponents), хозяйка назначала($emit)Мужчины что-то делают, а мужчины продолжают слушать($on)назначенный дамой($emit)里eventNameСообщение о событии запускается один раз$emitПосле запуска события$onслушал$emitОтправленные события, отправленные заказы и действия по выполнению отправленных заказов находятся во взаимно однозначном соответствии.

Объяснение в Апи:

vm.$emit( event, […args] )

параметр:

• {string} event
• [...args]

Запускает событие в текущем экземпляре. Дополнительные параметры передаются обратному вызову слушателя.

---

vm.$on( event, callback )

параметр:

{string | Array<string>}событие (только массив2.2.0+средняя поддержка){Function} callback

Применение:

Слушайте пользовательские события в текущем экземпляре. События могут бытьvm.$emitвызывать. Функция обратного вызова получит все дополнительные параметры, переданные функции триггера события.

---

<template>
  <div>
      <p @click='emit'>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
      return {
         msg : '点击后女人派发事件'
      }
  },
  created () {
      this.$on('wash_Goods',(arg)=> {
          console.log(arg)
      })
  },
  methods : {
      emit () {
         this.$emit('wash_Goods',['fish',true,{name:'vue',verison:'2.4'}])
      }
  }
}
</script>

О чем говорит приведенный выше случай? Сказал в начале статьи$emit(eventName) с$on(eventName)Это переписка один на один.Прежде чем объединить двух вышеупомянутых людей в семью, женщина напишет мужчине руководство и скажет мужчине, что я его раздам.$(emit)Эти вещи мужчины делают перед созданием семьи$on(eventName)Как сделать эти вещи позже.

Через приведенное выше описание я дополнительно объясню значение официального API.

---

vm.$emit( event, […args] )

параметр:

• {string} event

  • Первый параметр — это имя события, которое должно быть отправлено, которое должно иметь тип String.
  • История о том, как сказать человеку, что ему нужно сделать.

• [...args]

  • Второй параметр - это любой тип данных. Если нам нужно передать несколько разных типов данных, мы можем записать их в массив, например [объект, логическое значение, функция, строка,...], просто передайте один параметр, мы можем напрямую писать

   this.$emit('wash_Goods','fish')
  

  • Эта история — руководство для мужчин, рассказывающее мужчинам, куда положить вещи, какие инструменты им понадобятся и так далее.

---

vm.$on( event, callback )

параметр:

• {string | Array<string>}событие (только массив2.2.0+средняя поддержка)

• Первый параметр относится к$emit (eventName)соответствующий$on (eventName), они сосуществуют и должны иметь тип String.

• (数组只在2.2.0+中支持)илиArray<String>Массив должен содержать элементы String, которые будут описаны позже.

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

• {Function} callback

• Второй параметр — это функция, также называемая предыдущей функцией обратного вызова, которая может получать параметры, переданные при срабатывании $emit (если это один параметр).

• История в том, что мужчины совершают поступки, когда получают подачку от женщины.

---

Событие {string | Array} (только массив2.2.0+средняя поддержка)

Добавление этого API в версии 2.2 связано с другим способом, и есть другие уникальные применения.

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

Если женщины говорят мужчинам, что они будут следить за этими вещами, прежде чем они создадут семью, и если они сделают что-то одно, они пожалуются один раз.Array<string> eventЗапишите имя события в виде массива, запишите в массив события, которые вы хотите прослушивать, и используйте принцип совместного использования для выполнения некоторых отправленных событий.

<template>
  <div>
      <p @click='emit'>{{msg}}</p>
      <p @click='emitOther'>{{msg2}}</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
      return {
         msg : '点击后女人派发事件',
         msg2 : '点击后女人派发事件2',
      }
  },
  created () {

      this.$on(['wash_Goods','drive_Car'],(arg)=> {
          console.log('事真多')
      })
      this.$on('wash_Goods',(arg)=> {
          console.log(arg)
      })
      this.$on('drive_Car',(...arg)=> {
          console.log(BMW,Ferrari)
      })
  },
  methods : {
      emit () {
         this.$emit('wash_Goods','fish')
      },
      emitOther () {
         this.$emit('drive_Car',['BMW','Ferrari'])
      }
  }
}
</script>

Вышеприведенные случаи иллюстрируют, что когда женщина раздаетdrive_Carилиwash_Goodsсобытия, распечатаю事真多, а затем выполните взаимно однозначные соответствующие отслеживаемые события.

Обычно вышеприведенное использование бессмысленно. В обычном бизнесе это использование тоже не используется Обычно при написании компонентов пусть$emit在父级作用域中Создайте триггер, который уведомляет дочерний компонент о том, что нужно что-то сделать. Далее вы можете увидеть событие диспетчеризации события, получив экземпляр дочернего компонента в родительском компоненте.Однако в дочернем компоненте заранее подготовьтесь к диспетчеризации мониторинга событий и получите взаимно однозначное соответствующее событие, чтобы сделать обратный вызов Аналогично, его также можно назвать интерфейсом, предоставляемым инкапсулированным компонентом родительскому компоненту.

DEMO загрузка с бесконечной прокруткой

<template>
    <div>
        <slot name="list"></slot>

        <div class="list-donetip" v-show="!isLoading && isDone">
            <slot>没有更多数据了</slot>
        </div>

        <div class="list-loading" v-show="isLoading">
            <slot>加载中</slot>
        </div>
    </div>
</template>

<script type="text/babel">

    export default {
        data() {
            return {
                isLoading: false,
                isDone: false,
            }
        },
        props: {
            onInfinite: {
                type: Function,
                required: true
            },
            distance : {
                type : Number,
                default：100
            }
        },
        methods: {
            init() {
                this.$on('loadedDone', () => {
                    this.isLoading = false;
                    this.isDone = true;
                });

                this.$on('finishLoad', () => {
                    this.isLoading = false;
                });
            },
            scrollHandler() {
                if (this.isLoading || this.isDone) return;
                let baseHeight = this.scrollview == window ? document.body.offsetHeight : this.scrollview.offsetHeight
                let moreHeight = this.scrollview == window ? document.body.scrollHeight : this.scrollview.scrollHeight;
                let scrollTop = this.scrollview == window ? document.body.scrollTop : this.scrollview.scrollTop

                if (baseHeight + scrollTop + this.distance > moreHeight) {
                    this.isLoading = true;
                    this.onInfinite()
                }
            }
        },
        mounted() {
            this.scrollview = window
            this.scrollview.addEventListener('scroll', this.scrollHandler, false);
            this.$nextTick(this.init);
        },
    }
</script>

Простая инкапсуляция загрузки раскрывающегося списка компонентов и других компонентов:

data 参数解释：

• isLoading false 代表正在执行下拉加载获取更多数据的标识,true代表数据加载完毕
• isDone false 代表数据没有全完加载完毕,true 代表数据已经全部加载完毕

props 参数解释：

• onInfinite 父组件向子组件传入当滚动到底部时执行加载数据的函数
• distance 距离滚动到底部的设定值

Из этого компонента мы выполняем анализ каждого шага

• существуетmountedкогда, даwindowМонитор прокрутки выполняется на изображении, а функция монитораscrollHandler
  • когдаisLoading，isDoneЛибо верный выход
    • isloadingдляtrueВо избежание многократной загрузки одной и той же загрузки необходимо дождаться ее завершения.
    • isDoneдляtrueКогда это означает, что все данные были загружены, нет необходимости выполнять его сноваscrollHandler
  • При этом первоначальный мониторинг выполняется в $nextTick
    • loadedDoneПосле события $emit('loadedDone') экземпляра компонента выполните обратный вызов и отпустите разрешение на загрузку.
    • finishLoadПосле того, как экземпляр компонента Emit (событие "finishload", выполняется обратный вызов, освобождаются разрешения на загрузку.
• Посмотрите, что произошло в функции scrollHandler.
  • if (this.isLoading || this.isDone) return;Как только одно верно, выходим, причина описана в смонтированном
  • if (baseHeight + scrollTop + this.distance > moreHeight)При прослушивании события прокрутки объекта окна выполнять при прокрутке вниз
    • this.isLoading = true;предотвратить повторный мониторинг
    • this.onInfinite()Выполнить функцию загрузки данных

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

<template>
      <div>
          <infinite-scroll :on-infinite='loadData' ref='infinite'>
               <ul slot='list'>
                  <li v-for='n in Number'></li>
               </ul>
          </infinite-scroll>
      </div>
</template>

<script type="text/babel">
import 'InfiniteScroll' from '.......' //引入infinitescroll.vue文件
    export default {
         data () {
           return {
              Number : 10
           }
         },
         methods : {
           loadData () {
             setTimeout(()=>{
                this.Number = 20
                this.$refs.infinite.$emit('loadDone')
             },1000) 
           }
        }
    }
</script>

Внедрить компонент бесконечной прокрутки в родительский компонент

При скольжении вниз компонент бесконечной прокрутки будет выполнять входящие:on-infinite='loadData'функция В то же время для Loading будет установлено значение true, чтобы предотвратить повторное выполнение.

использовать здесьthis.$refs.infiniteполучатьinfinite-scrollэкземпляр компонента при запуске события перед компонентом$onСобытие, которое отслеживается, изменяет данные через одну секунду и испускает в то же времяloadDoneвещи, скажите компоненту выполняться внутреннеloadDoneОбратный вызов слушателя, данные все были загружены, установленыthis.isDone = true；однаждыisDoneилиisLoadingодинtrue, затем сохраняетreturn退出状态.

$emitа также$onИ стрельба, и прослушивание должны выполняться на экземпляре.

v-on использует настраиваемые события привязки

Первый этап$emitа также$onПосле разговора об отношениях между ними пришло время поговорить о v-on и$emitОтношение.

Кроме того, родительский компонент может напрямую использовать v-on для прослушивания событий, инициированных дочерним компонентом при использовании шаблона импорта дочернего компонента.

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

Warn

不能用 $on 侦听子组件释放的事件，而必须在模板里直接用 v-on 绑定.

Что такое предупреждение выше?$emit和$on只能作用在一一对应的同一个组件实例,а такжеv-on只能作用在父组件引入子组件后的模板上.

Как следующее:<children v-on:eventName="callback"></children>

Возьмем официальный пример, который на самом деле довольно интуитивен:

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

Где польза от этого? несмотря на то чтоVueЭто односторонний поток данных, но дочерний компонент не может напрямую изменять данные родительского компонента (это не совсем невозможно, но не рекомендуется). шаблон дочернего компонента.v-onСобытие слушателя привязки, а затем записать обратный вызов, который будет выполняться после прослушивания.

существуетcounter-event-exampleВ родительском компоненте делается два объявленияbutton-countреальный столбец , черезdataВ форме закрытия данные обоих можно использовать отдельно, аv-onконтролируемыйeventNameнаходятся в своей собственной колонке$emitИнициированные события, но обратный вызов является общедоступнымincrementTotalФункция, поскольку срабатывает экземпляр, выполняет операцию!

Если вы просто хотите просто провести двустороннюю связь между родительским и дочерним компонентами на основе одних данных, передайте шаблонv-onи в экземпляре шаблона он прослушивается$emitЭто немного избыточно для запуска события. обычно черезv-onЧтобы отслеживать триггерные события подкомпонентов, мы выполним несколько многоэтапных операций.

Подсборка

<template>
  <div>
      <p @click='emit'>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
      return {
         msg : '点击后改变数据',
      }
  },
  methods : {
      emit () {
         this.$emit('fromDemo')
      },
  }
}
</script>

родительский компонент

<template>
  <div class="hello">
     <p>hello {{msg}}</p>
     <demo v-on:fromDemo='Fdemo'></demo>
  </div>
</template>
<script>
import Demo from './Demo.vue'
export default {
  name: 'hello',
  data () {
    return {
       msg: '数据将在一秒后改变'
    }
    
  },
  methods: {
    waitTime() {
      return new Promise(resolve=>{
        setTimeout(()=> {
            this.msg = '数据一秒后改变了'
            resolve(1)
        },1000)
      })
    },
    async Fdemo () {
        let a = await this.waitTime();
        console.log(a)
    }
  },
  components : {
     Demo
  }
}
</script>

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

Когда родительский компонент получает триггер события дочернего компонента, он выполняетasyncАсинхронное событие, которое изменяется на одну секундуmsg, а затем распечатайте обратный вызов и передайтеpromiseВозвращаемое значение.

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

Вносим некоторые изменения:

children

<template>
  <div>
      <p @click='emit'>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  props: [ 'msg' ],
  methods : {
      emit () {
         this.$emit('fromDemo','数据改变了')
      },
  }
}
</script>

parent

<template>
  <div class="hello">
     <demo v-on:fromDemo='Fdemo' :msg='msg'></demo>
  </div>
</template>
<script>
import Demo from './Demo.vue'
export default {
  name: 'hello',
  data () {
    return {
       msg: '数据没有改变'
    }
  },
  methods: {
    Fdemo (arg) {
      this.msg = arg 
    }
  },
  components : {
     Demo
  }
}
</script>

надdemoНейтронная компонента получаетmsgданные, но когда вы хотите нажать кнопку, измените родительский компонентmsg, внесите изменения в данные родительского компонента и снова измените данные в дочернем компонентеmsg, но проще всего напрямую изменитьpropвнутриmsgДанные. Однако поток данных, управляемый данными, является односторонним потоком данных. Чтобы не вызывать путаницы при передаче данных, мы можем полагаться только на какие-то другие средства для его завершения. Небольшая передача данных очень сложна, поэтому мы поговорим о том, как использовать его позже.ApiСделайте соответствующую вещь.

Руководство по следующему курсу:

В первые дни 2.0.syncбыл отрублен,v-modelвзял на себя ответственность за двустороннюю привязку, в конце концовv-modelОн не предназначен для двусторонней привязки данных между компонентами и компонентами, и для его использования всегда бывают плохие времена.2.3Возврат версии, позволяющей форме отображаемого уведомления снова активировать двустороннюю привязку,.syncилиv-modelСравнивать$emitа такжеv-onЭто просто более удобно для простого взаимодействия данных родительского и дочернего компонентов.

Урок 04: .sync возвращается, приближается миссия v-model

В предыдущей главе мы$emit和v-onОбъясняется, как взаимодействовать с данными и поведением, но если он просто используется для изменения передачи данных.sync和v-modelНе может быть более подходящим. Если вы пользовались разработчиками Vue версии 1.0, я считаю, что .sync сделает ее очень удобной для вас.Осуществить двойную, двустороннюю привязку родительских и дочерних компонентов через двустороннюю привязку очень легко.В 2.0, чтобы сохранить качество одностороннего потока данных, удаляется функция .sync.

Официальное объяснение:

1.0 Реквизит теперь можно передавать только в одну сторону. Чтобы оказать негативное влияние на родительский компонент, дочерний компонент должен явно передать событие вместо того, чтобы полагаться на неявную двустороннюю привязку.

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

• события пользовательского компонента
• Пользовательские компоненты ввода (с использованием событий компонента)
• глобальное управление состоянием

По многим наблюдениям, в начальной версии 2.0 из-за того, что .sync не возвращался, он возвращался только в 2.3, а двусторонняя привязка данных в библиотеке компонентов почти вся делалась через v-model. Однако как семантически, так и визуально смысл обслуживания кода не интуитивно понятен, и v-модель обычно разрабатывается в сочетании с Поле ввода ввода для объединения привязки данных, двусторонней привязки родительских и дочерних компонентов, но по сравнению с пользовательскими событиями компонента v-on оно более лаконичное с точки зрения объема кода и использования.

Во Vue есть много общего с Angular, главным образом потому, что Angular был источником вдохновения для ранней разработки Vue. Однако в Angular есть много проблем, которые были решены в Vue.

официальное объяснение

Пользовательские события можно использовать для создания настраиваемых компонентов ввода формы с использованием v-model для двусторонней привязки данных.

<input v-model="something">

Это не что иное, как синтаксический сахар для следующего примера:

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

v-model на самом деле является синтаксическим сахаром.Чтобы понять эти коды, вы должны сначала знатьInput元素Eстьoninput事件,ЭтоHTML5新增加, похожий на onchange, который запускается всякий раз, когда содержимое поля ввода изменяетсяInput事件, затем поместите ввод в поле Значение value снова передается чему-то.

В это время значение применяется к элементу ввода, используя: v-bind:value='something', смысл в том, чтобы просто поставить Значение значения в поле ввода ввода привязано к чему-то как соответствие один к одному, что похоже на циклическую операцию.Когда событие ввода запускается снова,input($event.target)对象中的value值会再次改变something.

Здесь мы разбираем синтаксический сахар привязки v-модели к элементу Input.

Поскольку двусторонняя привязка может быть выполнена на элементах, как реализовать двустороннюю привязку в компонентах?Принцип на самом деле тот же, но когда он применяется к пользовательским компонентам, это не так.$event.target.valueпотому что я не действую на Входная входная коробка.

Это эквивалентно следующему сокращению, при использовании в компоненте:

<custom-input
  v-bind:value="something"
  v-on:input="something = arguments[0]">
</custom-input>

С помощью приведенного выше сокращения позвольте v-model выполнить двустороннюю привязку родительско-дочернего компонента через пользовательское событие.

• v-bind:value='something' На данный момент значением является реквизит, полученный как дочерний компонент.

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

 v-on:input="something = arguments[0]"

В это время при воздействии на компонент синтаксический сахар мониторинга v-on также будет изменен, а мониторинг не$event.target.value, но回调函数中的第一个参数.

родительский компонент

<template>
  <div class="hello">
    <button @click="show=true">打开model</button>
    <demo v-model="show"></demo>
  </div>
</template>

<script>
import Demo from './Demo.vue'
export default {
  name: 'hello',
  components: {
    Demo
  },
  data () {
    return {
      show: false
    }
  }
}
</script>

Подсборка

<template>
   <div v-show="value">
      <div>
         <p>这是一个Model框</p>
         <button @click="close">关闭model</button>
      </div>
   </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    close () {
      this.$emit('input',false)
    }
  }
}
</script>

Это базовый прототип модального блока, который может отображать взаимодействие между блоком модели и родительским компонентом через v-модель в родительском компоненте.

Видно через подкомпоненты通过props接收了value值, когда на него нажимают, чтобы закрыть, он все еще передается$emit事件触发input事件, а затем передать параметр false.

Родительский компонент неявно отслеживается с помощью v-on:input="something = arguments[0]". После запуска события Input родительский компонент выполнит контрольный обратный вызов, тем самым достигнув двусторонней привязки.

Флажок и принцип радио

 <input type="checkbox" :checked="status" @change="status = $event.target.checked" />
 
  <input type="radio" :checked="status" @change="status = $event.target.checked" />

При привязке атрибута checked один и тот же слушатель Событие изменения, будь то флажок или радио, будет неявно и автоматически запускать событие изменения при работе, что аналогично привязке Input через значение value.

V-модель пользовательского компонента

пользовательские компоненты, мы можем重写v-model里的Props 和 event, по умолчанию v-модель компонента будет использоватьvalue 属性а такжеinput 事件, часто иногда значение value занято, или форма и пользовательскийv-model的$emit('input')事件发生冲突, чтобы избежать этого конфликта, вы можете настроить компонент v-model, пример конфликта.

Подсборка

<template>
   <div v-show="value">
      <div>
         <p>这是一个Model框</p>
        <input type="text" v-model="value">
        {{value}}
         <button @click="close">关闭model</button>
      </div>
   </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    close () {
      this.$emit('input',false)
    }
  }
}
</script>

родительский компонент

<template>
  <div class="hello">
    <button @click="show=true">打开model</button>
    <demo v-model="show"></demo>
  </div>
</template>

<script>
  import Demo from './Demo.vue'
  export default {
    name: 'hello',
    components: {
      Demo
    },
    data () {
      return {
        show: false
      }
    }
  }
</script>

В приведенном выше примере можно обнаружить, что в дочернем компонентеinput中v-modelа такжеmodel显示的操作数据共同占用的 props 中的（value）, оба они также совместно используют событие триггера emit('input'), событие поля ввода Input запускается автоматически, а исчезновение отображения модели запускается вручную.

Во время инициализации значение поля ввода ввода будет автоматически добавлено к ложному значению, переданному по значению.При изменении поля ввода ввода будет сообщено об ошибке из-за конфликта.

Настройте v-модель и измените значение реквизита и события с помощью параметра модели, чтобы разрешить конфликт между ними.

• реквизит заменяет значение исходного значения, вы можете настроить значение
• событие представляет собой триггерное событие исходного ввода, и триггерное событие можно настроить

Подсборка

<template>
   <div v-show="show">
      <div>
         <p>这是一个Model框</p>
        <input type="text" v-model="value">
        {{value}}
         <button @click="closeModel">关闭model</button>
      </div>
   </div>
</template>

<script>
export default {
  model: {
    prop: 'show',
    event: 'close'
  },
  props: ['show'],
  data () {
     return {
       value: 10
     }
  },
  methods: {
    closeModel () {
      this.$emit('close',false)
    }
  }
}
</script>

родительский компонент

<template>
  <div class="hello">
    <button @click="show=true">打开model</button>
    <demo v-model="show" ></demo>
  </div>
</template>

<script>
  import Demo from './Demo.vue'
  export default {
    name: 'hello',
    components: {
      Demo
    },
    data () {
      return {
        show: false
      }
    }
  }
</script>

При изменении параметра модели реквизит меняется с оригинала.value换成了show,input触发的事件换成了close, чтобы они не зависели друг от друга, решая проблему конфликта.

Иногда вы хотите передать его через шаблон дочернего компонента в родительский компонент. value value, вызовет тот же конфликт.

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

<demo v-model="show" value="some value"></demo>

props:['value']

Возвращение короля .sync

В некоторых случаях нам может понадобиться «двусторонняя привязка» реквизита. На самом деле это именно то, что обеспечивает модификатор .sync в Vue 1.x. Когда дочерний компонент изменяет значение реквизита, это изменение также синхронизируется со значением, привязанным к родительскому компоненту. Это удобно, но также вызывает проблемы, поскольку нарушает предположение об «одностороннем потоке данных». Поскольку код дочернего компонента, который меняет проп, ничем не отличается от обычного кода изменения состояния, когда вы просто смотрите на код дочернего компонента, вы совершенно не представляете, когда он незаметно изменил состояние родительского компонента. Это приводит к высоким затратам на обслуживание при отладке приложений со сложной структурой.

После выпуска 2.0, будь то в бизнес-компонентах или библиотеках функциональных компонентов, большое количество подкомпонентов может обеспечить повторное использование высокой мощности при изменении данных родительско-дочерних компонентов и в библиотеке компонентов, но это вернулось в 2.3 и повторно - введен модификатор .sync, на этот раз он просто существует как синтаксический сахар времени компиляции. Он будет расширен до прослушивателя v-on, который автоматически обновляет свойства родительского компонента.

В предыдущем примере v-model — это не двухсторонняя привязка, предназначенная для связи между компонентами, ведь она не так интуитивно понятна и удобна, как .sync с точки зрения семантики и написания кода.

Как с точки зрения V-модели, либо .Sync модификаторы, являются неразделимыми $ EMIT V-на упаковке синтаксический сахар, основной целью является обеспечение правильного одностороннего потока потоков данных отображения.

<demo :foo.sync="something"></demo>

Расширение синтаксического сахара:

<demo :foo="something" @update:foo="val => something = val"></demo>

• foo — это данные, которые демонстрационный дочерний компонент должен получить от реквизитов родительского компонента.
• Отображение и мониторинг update:foo через события (foo — реквизит для отображения отслеживаемых данных), выполнение обратных вызовов с помощью стрелочных функций и передача параметров чему-либо, после чего формируется двусторонняя круговая цепочка связывания

Когда дочернему компоненту необходимо обновить значение foo, ему необходимо явно запустить событие обновления:

this.$emit('update:foo', newValue)

Также родительский компонент@update:fooЭто также зависит от триггера отображения дочернего компонента, чтобы его можно было легко захватить.数据的正确的流动.

Первый параметр update — это событие, отображающее обновление, за которым следует：fooтребуется для改变对应的props值.

Второй переданный параметр — вы希望父组件foo数据里将要变化的值,к用于父组件接收update时更新数据.

Подсборка

<template>
   <div v-show="show">
      <p>这是一个Model框</p>
      <button @click="closeModel">关闭model</button>
   </div>
</template>
<script>
export default {
  props: ['show'],
  methods: {
    closeModel () {
      this.$emit('update:show',false)
    }
  }
}
</script>

родительский компонент

<template>
  <div class="hello">
    <button @click="show=true">打开model</button>
    <demo :show.sync="show" ></demo>
  </div>
</template>

<script>
  import Demo from './Demo.vue'
  export default {
    name: 'hello',
    components: {
      Demo
    },
    data () {
      return {
        show: false
      }
    }
  }
</script>

The above case also solves the model display interaction operation. From the semantics of the code, it seems clear to the developer at a glance. It also does what v-model can't do, based on the atomization of props, to the incoming реквизит.进行多个数据双向绑定.sync тоже может это легко сделать.

родительский компонент

<template>
  <div class="hello">
    <button @click="show=true">打开model</button>
    <demo :show.sync="show" :msg.sync="msg"></demo>
  </div>
</template>

<script>
  import Demo from './Demo.vue'
  export default {
    name: 'hello',
    components: {
      Demo
    },
    data () {
      return {
        show: false,
        msg: '这是一个model'
      }
    }
  }
</script>

Подсборка

<template>
   <div v-show="show">
      <p>{{msg}}</p>
      <button @click="closeModel">关闭model</button>
     <button @click="$emit('update:msg','改变了model文案')">改变文案</button>
   </div>
</template>
<script>
export default {
  props: ['show', 'msg'],
  methods: {
    closeModel () {
      this.$emit('update:show',false)
    }
  }
}
</script>

Родительский компонент передает значения msg и show реквизитам дочернего компонента, оба из которых используют модификатор .sync для двусторонней привязки.

warn

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

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

, Модификатор синхронизации приносит нам большое удобство, и в то же время в основном наборе V-модели в исходном наборе 2.0 он все еще очень постучал с разработчиками, и медленно замедляется после .sync .sync делает версию миграции.

Руководство по следующему курсу:

Не на основе большого количества поведенческих операций, а только для одного или нескольких двунаправленных компонентов данных можно легко использовать .sync и v-model Чтобы решить проблему взаимодействия компонентов, часто бывает не так легко и просто, как вы думаете.Когда проект сложный, то, как разумно разделить компоненты, сделает бизнес-код清晰度,复用率,后续维护都会降低成本, должны быть трудности, и это также вызовет глубокую передачу между компонентами, так как же мы общаемся? Первым решением, которое приходит на ум, должен быть Vuex. Vuex понимает, что на самом деле он не используется для работы с компонентами глубокого размаха, что часто приводит к злоупотреблению Vuex, и$attrs $listenersЭта пара братьев может помочь вам в глубоком компонентном общении.

Урок 05:слушатели два брата

В версии 2.4 примерно$attrsа также$listenersИспользование этих двух атрибутов экземпляра пока довольно расплывчато, и глубокое копание будет очень полезно, т.к. Vuex может понадобиться для глубокого взаимодействия компонентов в проекте, но если это просто глубокая передача данных, или какое-то взаимодействие Когда вам нужно уведомить об изменениях данных компонента верхнего или родительского уровня, VUX может быть немного избыточным!

При каких обстоятельствах это будет избыточно?Если мы пропускаем пропсы слой за слоем, а затем переходим через часы или данные, если только односторонние данные могут передаваться в глубину, мы можем отслеживать и изменять глубоко передаваемые данные, а не выполнять кросс-маршрутизацию.Для обмена между страницами очень удобно использовать эти два свойства.

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

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

$attrСвязь с interitAttrs

InteritАтрибуты:

По умолчанию родительская область не учитываетсяprops 的特性绑定 (attribute bindings)Будет «отступать» и применяться к корневому элементу дочернего компонента как обычный атрибут HTML. Это может не всегда вести себя так, как ожидается, при написании компонентов, которые обертывают целевой элемент или другой компонент. Установив для inheritAttrs значение false, это поведение по умолчанию будет удалено. И через (также новое в 2.4) свойства экземпляра$attrsЭти атрибуты могут быть включены и могут быть явно привязаны к некорневым элементам через v-bind.

Примечание. Этот параметр не влияет на привязки классов и стилей.

what?

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

Подсборка

<template>
   <div>
      {{first}}
   </div>
</template>
<script>
export default {
   name: 'demo',
   props: ['first']
}
</script>

родительский компонент

<template>
  <div class="hello">
     <demo :first="firstMsg" :second="secondMessage"></demo>
  </div>
</template>

<script>
  import Demo from './Demo.vue'
  export default {
    name: 'hello',
    components: {
      Demo
    },
    data () {
      return {
        firstMsg: 'first props',
        secondMessage: 'second props'
      }
    },
  }
</script>

Родительский компонент передает два данных, firstMsg и secondMsg, в дочернем компоненте.В дочернем компоненте должна быть точка приема, определяемая соответствующими реквизитами.Если он определен в реквизитах, вы обнаружите, что и firstMsg, и secondMsg имеют становятся дочерними Данные, полученные компонентом, могут использоваться для отображения данных и операций поведения.

Хотя два данных определены через свойства в шаблоне дочернего компонента в родительском компоненте, свойства в дочернем компоненте получают только один, только firstMsg, но не secondMsg, и дочерний компонент станет дочерним компонентом, если он не получен , Корневой узел атрибута без штриховки.

<div class="hello" second="secondMessage"></div>

агент событий

Когда мы используем v-for для рендеринга большого количества одной и той же структуры DOM, но добавляем к каждой из них событие клика, что вызовет проблемы с производительностью, тогда мы можем использовать настраиваемый атрибут данных HTML5 в качестве прокси события.

Изменения родительского компонента

<template>
  <div class="hello" @click="ff">
     <demo :first="firstMsg" :data-second="secondMsg"></demo>
     <demo :first="firstMsg" :data-second="secondMsg"></demo>
     <demo :first="firstMsg" :data-second="secondMsg"></demo>
     <demo :first="firstMsg" :data-second="secondMsg"></demo>
  </div>
</template>

<script>
  import Demo from './Demo.vue'
  export default {
    name: 'hello',
    components: {
      Demo
    },
    data () {
      return {
        firstMsg: 'first props',
        secondMsg: 'secondMsg'
      }
    },
    methods: {
      ff (e) {
        if(e.target.dataset.second == 'secondMsg') {
            console.log('通过事件委托拿到了自定义属性')
        }
      }
    }
  }
</script>

После модификации в родительском компоненте имя параметра, переданное дочернему компоненту, изменяется на HTML-настраиваемый атрибут data-second, и реквизиты не принимаются в дочернем компоненте, и каждый компонент дочернего компонента естественным образом становится Пользовательские свойства для корневого узла.

Однако благодаря принципу всплытия событий вы можете найти соответствующий узел Dom для логических операций из e.target.dataset.second.

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

что случилось с interitAttrs = false ?

<template>
   <div>
      {{first}}
   </div>
</template>
<script>
export default {
   name: 'demo',
   props: ['first'],
   inheritAttrs: false,
}
</script>

Для внесения изменения в подкомпонент добавляем inheritAttrs:false, что буквально означает отмену унаследованного атрибута, но второй все равно не получен в пропсе, и обнаруживается, что даже если он не получен в пропс Во-вторых, никакие свойства не привязаны к корневому элементу дочернего компонента.

$attrs

Содержит привязки свойств (кроме класса и стиля), которые не считаются (и не должны быть) реквизитами в родительской области. Когда компонент не объявляет никаких реквизитов, все привязки родительской области (кроме класса и стиля) включаются сюда и могут быть переданы внутренним компонентам через v-bind="$attrs" - очень полезно при создании компонентов более высокого уровня.

В предыдущем примере дочерний компонентprops中并没有接受seconed,设置选项 inheritAttrs： false, и он не будет использоваться как узел атрибута корневого элемента, а все неполученные данные будут$attrПолучен атрибут экземпляра, который содержит все входящие данные от родительского компонента, а дочерний компонент не отображает полученные данные в Props.

Для проверки факта можно добавить в подкомпонент

created () {
       console.log(this.$attrs)
    }

распечатать объект {второй: "secondMsg", третий: "therthMsg"}

warn

хочу пройти$attrПолучено, но необходимо убедиться, что установлена ​​опция inheritAttrs: false, иначе он по умолчанию станет узлом атрибута корневого элемента.

Как я сказал в начале, наиболее полезной ситуацией является создание внучатого компонента третьего уровня, когда компонент глубокого уровня используется в качестве дочернего компонента родительского компонента второго уровня, внучатый компонент, представленный в дочернем компоненте, и весь шаблон на шаблоне.$attrКогда данные передаются, нет необходимости вручную преобразовывать данные каким-либо образом.

Подсборка

<template>
   <div>
      <next-demo v-bind="$attrs"></next-demo>
   </div>
</template>

компонент внука

<template>
  <div>
      {{second}}{{third}}
  </div>
</template>

<script>
  export default {
     props : [ 'second' , 'third']
  }
</script>

Внучатый компонент передается в дочерний компонент, принимающий реквизит.$attrДанные из пакета также являются данными из родительского компонента, но используются только в дочернем компоненте.$attrsОн принимается единообразно, затем передается вниз и, наконец, принимается через компонент внука.

Таким образом, внучатый компонент все равно не хочет его получать, а затем передает его подчиненному компоненту, нам еще нужно установить параметр inheritAttrs:false для параметра силы внучатого компонента, иначе он все равно станет атрибутом узел корневого элемента внучатого компонента.

использовать$attrsЭто очень удобное событие для получения реквизита для повторной передачи полученных данных.Мы понимаем, как получить данные с глубокого уровня и как изменить данные из запроса глубокого уровня. Это означает сделать двустороннюю привязку между данными верхнего уровня и данными нижнего уровня.

$listeners

слушателей можно рассматривать как слушателей.

Я уже понял, как передавать данные вниз. Проблема в том, как изменить данные в компоненты верхнего уровня. Родительские и дочерние компоненты могут передавать ряд методов, таких как v-model, .sync, v-on и deep- компоненты уровня могут проходить$listenersсправляться.

$listenersа также$attrsОба поверхностных слоя имеют одинаковое значение,$attrsПоставляет данные вниз,$listenersЭто метод нисходящего прохода, который вызывается вручную.$listenersМетод в объекте, принцип$emitслушать события,$listenersЕго также можно рассматривать как объект, обертывающий событие прослушивателя.

родительский компонент

<template>
  <div class="hello">
     {{firstMsg}}
     <demo v-on:changeData="changeData" v-on:another = 'another'></demo>
  </div>
</template>

<script>
  import Demo from './Demo.vue'
  export default {
    name: 'hello',
    components: {
      Demo
    },
    data () {
      return {
        firstMsg: '父组件',
      }
    },
    methods: {
      changeData (params) {
         this.firstMsg = params
      },
      another () {
        alert(2)
      }
    }
  }
</script>

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

<template>
   <div>
      <p @click="$emit('another')">子组件</p>  
      <next-demo  v-on='$listeners'></next-demo>
   </div>
   
</template>
<script>
import NextDemo from './nextDemo.vue'
export default {
   name: 'demo',
   components: {
       NextDemo
   },
   created () {
     console.log(this.$listeners)
   },
}
</script>

В подкомпонентах представлена ​​внучатая сборка NextDemo. В подкомпонентах$attrsто же самое, вы можете использовать$listenersЧтобы получить отслеживаемые события в целом,{changeData: ƒ, another: ƒ}Чтобы получить как объект, в настоящее время два события, отслеживаемые в шаблоне дочернего компонента в родительском компоненте, могут использоваться не только атрибутами экземпляра дочернего компонента.$listenersЧтобы получить целое, и в то же время может быть запущен в подкомпоненте.

Так же во внуке компонента nextDemo продолжаем проходить вниз, передаем v-on на весь$listenersПолученное событие передается дочернему компоненту, просто$listenersПолучите все события прослушивания от родительского компонента и передайте их вместе$listenersПерешли к компоненту внука вместе.

компонент внука

<template>
  <div class="hello">
      <p @click='$listeners.changeData("change")'>孙子组件</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  created () {
      console.log(this.$listeners)
  },
}
</script>

все еще может получить данные, переданные из подгруппы$listenersВ настоящее время не проходят все события прослушивания$emitдля запуска, но как вызов функции,$emitЭто только для двусторонней связи между родительским и дочерним компонентами,$listenersОн оборачивает объект, а именно changeData и др. Событие напрямую запускается $listeners.changeData('change') и функцией обратного вызова после выполнения слушателя, которая заключается в вызове функции родительского компонента через передачу функция.

пройти через$attrsа также$listenersВы можете с радостью решать проблемы связи между глубокими компонентами и более рационально организовывать свой код.

Следующее руководство

Выше описано, как передавать данные вниз от компонентов высокого уровня и уведомлять компоненты верхнего уровня об изменении данных или выполнении некоторых поведенческих операций.$listenersЭто похоже на вызов функции родительского компонента, похоже, это вообще не имеет значения, вы можете использовать$parents，$childrenТо же самое можно сделать. Дело не в том, что он недоступен, а в том, что он подходит для использования в каких обстоятельствах.В следующей части я представлю формирование кукол и интеллектуальные компоненты, чтобы понять, как точно использовать API для взаимодействия поведения и взаимодействия данных в правильном сценарии. .

Урок 06: Правильное использование компонентов smart и puppet

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

• Элементы хранения данных данных и реквизита
• один компонент$emitа также$onобщение, родительско-дочерний компонент v-on с$emitКоммуникация
• Режим двусторонней привязки .sync и v-model
• $attrsа также$listenersРежим приложения глубокой передачи данных и взаимодействие поведения

Вышеупомянутое охватывает большое количество режимов связи между компонентами.Только овладев вышеуказанными знаниями, вы сможете точно использовать написание и инкапсуляцию смарт-компонентов и кукольных компонентов.

Принцип умных компонентов

Смарт-компоненты можно назвать сторонними компонентами общего назначения или публичными компонентами бизнес-типа.Взаимоотношения с родительским компонентом полностью развязаны.Данные могут передаваться только через пропсы, а события передаются через события, которые не зависят ни от каких среде вам нужно только передать соответствующие данные и события, чтобы получить желаемую операцию.

Принцип сборки куклы

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

Другим аспектом является использование соединения составных компонентов. Когда смарт-компонент является составным смарт-компонентом, состоящим из двух компонентов, и между его подкомпонентом и родительским компонентом существует принцип марионетки, поскольку они взаимны, разработчик призывает и должен поддерживать их отношения Сексуальность, нормативность, как только она изменяет свой собственный режим, он будет недействителен.

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

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

Связь с родительским компонентом

$parentУказав на родительский компонент текущего компонента, вы можете получить весь экземпляр родительского компонента. Как упоминалось ранее, компонент марионетки может четко знать, какой уровень компонентов используется в соответствующем маршруте каждой спа-страницы, которая может быть подкомпонентом текущей страницы, дочерним компонентом или более глубоким уровнем. Если вы хотите взаимодействовать с родительским компонентом, вы можете указать, как передавать данные или поведение с родительским компонентом, не принимая во внимание предпосылку повторного использования.

родительский компонент

<template>
  <div class="hello">
     {{msg}}
     <demo></demo>
  </div>
</template>

<script>
  import Demo from './Demo.vue'
  export default {
    name: 'hello',
    components: {
      Demo
    },
    data () {
      return {
        msg: '父组件',
      }
    }
  }
</script>

Подсборка

<template>
   <div>
      <p>{{demoMsg}}</p>
      <p @click="handleClick">子组件</p>  
   </div>
   
</template>
<script>
export default {
   name: 'demo',
   data () {
     return {
        demoMsg : ''
     }
   },
   methods: {
     handleClick () {
        let msg = this.$parent.msg
        this.demoMsg = msg
        this.$parent.msg = '父组件数据被改了'
     }
   }
}
</script>

Было ясно известно, что демонстрационный компонент является подкомпонентом компонента Hello или демонстрационный компонент является марионеточным компонентом компонента Hello.$parentВы можете получить и изменить свойства (данные) экземпляра родительского компонента по своему желанию. Точно так же это не нарушает принцип одностороннего потока данных.Можно сравнить v-on и$emitИли v-model, .sync, эти методы не только удобнее, но и быстрее, и позиция компонента понятна, как у марионетки, она никогда не изменится, а ее родительский компонент всегда будет один и тот же.

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

родительский компонент

...
methods : {
    parentMethods () {
        console.log('调用父组件的方法')
    }
}

Подсборка

this.$parent.parentMethods()

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

Компонентная коммуникация для $children

$childrenТакже для применения кукольного компонента это и$parentНаоборот, это Api для компонента, и его подкомпоненты явно известны, либо это может быть набор подкомпонентов, и нужный экземпляр подкомпонента точно получен, либо набор подкомпонентов указан.$childrenЭкземпляр дочернего компонента можно получить через родительский компонент, который обернут в массив.

родительский компонент

<template>
  <div class="hello">
     <p @click='handlerClick'>父组件</p>
     <demo></demo>
     <demo></demo>
  </div>
</template>

<script>
  import Demo from './Demo.vue'
  export default {
    name: 'hello',
    components: {
      Demo
    },
    methods: {
      handlerClick () {
        console.log(this.$children)
        this.$children.forEach(item => {
           item.demoMsg = '通过$children改变'
        })
      }
    }
  }
</script>

Подсборка

<template>
   <div>
      <p>{{demoMsg}}</p>
   </div>
   
</template>
<script>
export default {
   name: 'demo',
   data () {
     return {
        demoMsg : ''
     }
   }
}
</script>

В настоящее время не через дочерний компонент связывается с родительским компонентом, а родительский компонент взаимодействует с дочерним компонентом,$parentа также$childrenОн формирует механизм взаимодействия компонентов «родитель-потомок» друг с другом, что по-прежнему является ключевым предложением.只适合木偶组件的模式.

В родительском компоненте видно, что демонстрационный компонент является дочерним компонентом, через$childrenПолучите все экземпляры демонстрационного компонента и измените свойства экземпляра каждого подкомпонента с помощью цикла forEach. Поскольку все свойства (данные) в данных захвачены object.defineproperty, свойства в данных привязаны к экземпляру Vue. Из которого мы можем легко получить его.

Использование умных компонентов

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

Например:

Например, смарт-компонент A будет встраивать компоненты B и C в качестве подкомпонентов:

Когда A встроен в B, копия должна отображаться嵌入B组件中

Нужно отображать копию, когда A встроен в C嵌入C组件中

Скажи ему, что мне нужно, чтобы ты показал, передав ему данные и личность в разведку?

родительский компонент

<template>
  <div class="hello">
     <p>父组件</p>
     <demo type='A'></demo>
  </div>
</template>

<script>
  import Demo from './Demo.vue'
  export default {
    name: 'hello',
    components: {
      Demo
    }
  }
</script>

Подсборка

<template>
   <div>
      <p>{{type==='B'?'嵌入B的组件':'嵌入C的组件'}}</p>
   </div>
   
</template>
<script>
export default {
   name: 'demo',
   props: ['type']
}
</script>

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

Кукольный компонент в смарт-компоненте

Интеллектуальные компоненты и компоненты марионеток могут быть вложены друг в друга одновременно и могут воздействовать на复合组件上. Как правило, составные компоненты — это все трехсторонние общие компоненты, называемые смарт-компонентами, но родительские и дочерние компоненты составных компонентов также могут стать друг другом.木偶组件, оба могут быть相互依赖的关系. Вне зависимости от количества кода и понимания вызов будет очень удобным, а кукольный компонент сравнивается с умным компонентом.更方便理解和简洁,но功能上就比较单一.

Понимание компонентов марионеток в интеллектуальных компонентах с помощью аккордеона

Аккордеон — это сторонний общий компонент, а также составной компонент.

Аккордеонные компоненты

<template>
    <div>
        <slot></slot>
    </div>
</template>
<script>
    export default {
        props : ['repeat'],
        methods : {
            open (uid) {
                this.$children.forEach(item => {
                     if(item._uid != uid){
                         item.close = false
                     }
                })
            }
        }
    }
</script>

Компонент AccordionItem

<template>
<div>
   <p @click='handleClick'>{{title}}</p>
   <div v-show='close' >
      <slot></slot>
   </div>
</div>
</template>

<script>
    export default {
        props : ['title'],
        data () {
            return {
                close : false
            }
        },
        created () {
            if(this.$parent.repeat === true) {
                this.close = true
            }
        },
        methods : {
            handleClick () {
                this.$parent.open(this._uid)
                this.close = !this.close
            }
        }
    }
</script>

последний звонок

<template>
  <div class="hello">
     <accordion :repeat='true'>
         <accordion-item title='vueTitle'>vue</accordion-item>
         <accordion-item title='vue-routerTitle'>vue-router</accordion-item>
         <accordion-item title='vuex-Title'>vuex</accordion-item>
     </accordion>
  </div>
</template>

<script>
  import Accordion from './accordion.vue'
  import AccordionItem from './accordion-item.vue'
  export default {
    name: 'hello',
    components: {
      Accordion,
      AccordionItem
    }
  }
</script>

Давайте начнем со смарт-компонента, будь то аккордеон или элемент аккордеона, который предоставляет свойства для выполнения нужных вам операций.

Аккордеон показывает повтор, и когда повторение равно true, все элементы элементов инициализируются и расширяются.

аккордеон-элемент предоставляет заголовок, вы можете свободно передать заголовок, который хотите создать.

Часто это какие-то неопределенные факторы, и неизвестно, на каком уровне какого компонента страницы он может быть вложен.Это интеллектуальный аспект составных компонентов.

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

аккордеон-предмет от$parentвызвать метод open родительского компонента аккордеона, пока аккордеон проходит$childrenПолучите экземпляр каждого подкомпонента элемента аккордеона и выполните переход «показать-скрыть». Эти двое полностью сформировали пару марионеток, и эти отношения отца и сына никогда не разорвать.

Суммировать: Кукольный компонент: У дочернего компонента может быть только один отец, и он должен быть единственным, причем отец и сын выглядят совершенно одинаково, без них никто не может жить.

Интеллектуальный компонент: подкомпонент может иметь N отцов, что не является уникальным, и отец и сын не должны выглядеть одинаково.Подкомпонент может иметь характеристики N отцов, и подкомпонент может продолжать выжить, какой бы отец ни ушел.

Урок 07: Сообщения о центральных инцидентах, о которых вы не знали

Центральная коммуникация событий, как провод, соединяет связь двух компонентов одним проводом. Предыдущие уроки описывали взаимодействие между родительскими и дочерними компонентами и взаимодействие с глубоко вложенными компонентами, а также через различные API. и хорошее решение, но как насчет родственных компонентов, несмотря ни на что$emit v-on v-model .sync $attr与$listenersНичто из вышеперечисленного не применимо, все вышеперечисленное基于嵌套的父子组件进行通信.

Связь между компонентами на одном уровне также является общим режимом связи.Есть два параллельных компонента под большим контейнером (родительский компонент).Два компонента выполняют обмен данными или взаимодействие поведения.В методе API нет специального метода.дизайн из.

пройти через$emit, в-он,$onИспользуйте три вместе

Этот вид операции очень сложен.Если вы можете освоить взаимодействие трех вышеуказанных компонентов API на одном уровне, тогда вы сможете понять три компонента API. полностью усвоил. Этот метод является переходным методом, т.b->a a->c, значениеaставить в известностьb,bправильноaсделать монитор, когдаaСлушая что-то, в процессеcвызывать,cВнутренний мониторинг выполняется снова, таким образом формируя цепочку переходов. Тем не менее, код не так интуитивно понятен.Есть несколько триггерных событий и несколько событий прослушивания.Как только такой компонент уровня должен будет больше общаться, код будет казаться трудным в обслуживании.

пример демо

Родственный дочерний компонент Первый

<template>
  <div>
    <p @click="$emit('fromFirst','来自A组件')">first组件</p>
  </div>
</template>

<script>
  export default {
    name: 'first'
  }
</script>

В порядке, приведенном выше, сначала определите подкомпонент того же уровня, а при нажатии запуститеeventNameдляfromFirstмероприятие, проходящее来自A组件Параметры этой формыb->aПозволятьaслушать события, пустьbдля запуска событий.

родительский компонент

<template>
   <div>
     <p>父组件</p>
     <first v-on:fromFirst="hanlderFromA"></first>
     <second ref="second"></second>
  </div>
<template>
<script>
     import First from './first.vue'
  import Second from './second.vue'
  export default {
    name: 'login',
    components: {
      First,
      Second
    },
    methods: {
      hanlderFromA (Bmsg) {
        let second = this.$refs.second
        second.$emit('fromLogin', Bmsg)
      }
    }
  }
<script>

• Два родственных компонента вводятся в родительский компонент.First/Second, или продолжитьb->a. В настоящее времяaЭто родительский компонент, а затем разберитесь с точками знаний,v-on与$emitпроисходит父子组件事件通信, действующий на двух уровнях родительского и дочернего компонентов, вFirstв шаблоне компонентаv-on监听, после обнаружения триггераfromFirstсобытие,hanlderFromAфункция.
• Далееa->cэтот этап,$emit与$onОба действуют на фактический столбец одного и того же компонента черезthis.$refsполучатьSecondЭкземпляр компонента при выполненииhanlderFromA函数расскажи позжеcкомпоненты для связи при выводе ведомогоbПолученные параметры передаются повторно.

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

Родственный подкомпонент Второй

<template>
  <div>
    <p>{{Bmsg}}</p>
    <p>second组件</p>
  </div>
</template>

<script>
  export default {
    name: 'second',
    created () {
      this.$on('fromLogin', (Bmsg) => {
        this.Bmsg = Bmsg
        console.log('通信成功')
      })
    },
    data () {
      return {
        Bmsg: ''
      }
    }
  }
</script>

Второй компонент - это сторона, с которой сообщается, вa(父组件)спровоцировать, однакоc(second)Слушатель в компоненте, как только слушательfromLoginСобытия, вы можете делать то, что хотите, чтобы изменить данные, поведение операций не проблема.

Это是b->a a->cУзор, скажу только одним предложением, сложный! Это действительно сложно, и должен быть простой способ. Прежде чем перейти к более простому пути, познакомьтесьES6 模块的运行机制.

Как работают модули ES6

Когда движок JS статически анализирует скрипт, он встречает команду загрузки модуляimport, создаст只读引用. Исходное значение экспорта ES6 изменилось,import加载Соответственно изменится и значение. следовательно,ES6Модули динамически ссылаются и не кэшируют значения.Переменные в модулях привязаны к модулю, в котором они расположены.

Например

// lib.js
export let counter = 3;
export function incCounter() {
  counter++;
}

// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

Хотя вmain.jsзагружается при выполнении программыcount,ноcountсуществуетlib.jsИ вmain.jsСсылочное отношение формируется в библиотеках, как только внутреннийexportэкспортируетсяcounterкогда происходят изменения,main.jsтакже изменится.

Простая центральная обработка событий с дополнительными экземплярами

Определите дополнительный экземпляр для ретрансляции события, дляES6Механизм работы модуля уже был объяснен.Когда внутренние изменения модуля, часть, которая вводит модуль, также изменится.Когда в механизм загрузки вводится еще один дополнительный экземпляр,$emit与$onОбязательная связь может легко решить проблему путемb->a->cрежим для прямого перехода.

определить центральный экземпляр события

import Vue from 'vue'

export default new Vue()

Создайте новый экземпляр Vue, а затем экспортируйте этот экземпляр через механизм модуля es6.

Изменения родительского компонента

<template>
  <div>
     <p>父组件</p>
     <first></first>
     <second></second>
  </div>
</template>

<script>
  import First from './first.vue'
  import Second from './second.vue'
  export default {
    name: 'login',
    components: {
      First,
      Second
    }
  }

</script>

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

Родственный подкомпонент Первые изменения

<template>
  <div>
    <p @click="handleClick">first组件</p>
  </div>
</template>

<script>
  import Bus from './bus.js'
  export default {
    name: 'first',
    methods: {
      handleClick () {
        Bus.$emit('fromFirst', '来自A的组件')
      }
    }
  }
</script>

существуетfirst同级КомпонентbusВведение экземпляра, пусть при нажатииbusэкземпляр запускаетfromFirstСобытия, здесь вы уже можете понять, что механизм загрузки модуля работает с одним экземпляром$emit和$onПривязку связи см. ниже.

Изменения второго подкомпонента того же уровня

<template>
  <div>
    <p>{{Bmsg}}</p>
    <p>second组件</p>
  </div>
</template>

<script>
  import Bus from './bus.js'
  export default {
    name: 'second',
    created () {
      Bus.$on('fromFirst', ( Amsg )=> {
        this.Bmsg = Amsg
        console.log('同级组件交互成功')
      })
    },
    data () {
      return {
        Bmsg: ''
      }
    }
  }
</script>

также представилbusреальный столбец, черезbusиспользовать$onмониторfromFirstсобытие, потому чтоbus实例а такжеbus.jsвнутреннийexport defalt new VueОтношение является эталонным отношением, когда код выполняется независимо отfirstилиsecondкомпоненты проходятbus实例сформировал中央事件链条, этот способ не только интуитивно понятен, но и более удобен.

Расширение центральных событий Глубокое взаимодействие между компонентами

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

Решение моделирования:

• компонент
  • первый компонент -> первый внутренний компонент
  • второй компонент -> второй внутренний компонент

когдаfirstInner组件может быть связано сsecond组件илиsecondInner组件Подробное взаимодействие происходит по всему компоненты также могут быть использованы для перехода центрального события，如果说 vuex 是顶层共享数据源，那么中央事件就是顶层共享通信网.

демонстрационный пример

Все предыдущие родительские компоненты не пишут код, а показывают только компоненты firstInner и secondInner.

первыйвнутренний компонент

<template>
  <div>
    <p @click="handleClick">firstInner组件</p>
  </div>
</template>

<script>
  import Bus from './bus.js'
  export default {
    name: 'first',
    methods: {
      handleClick () {
        Bus.$emit('fromFirstInner', '来自firstInner组件')
      }
    }
  }
</script>

Компонент SecondInner

<template>
  <div>
    <p>secondInner组件</p>
  </div>
</template>

<script>
  import Bus from './bus.js'
  export default {
    name: 'secondInner',
    created () {
      Bus.$on('fromFirstInner',(msg) => {
         console.log(msg)
      })
    }
  }
</script>

Независимо от того, где и где находятся два компонента, которые вы хотите передать, и какова их связь, вам нужно только обработать центральное событие, чтобы завершить его, и вы также можете выполнить центральную обработку событий «один ко многим». Когда программный код поддается контролю, нет ничего невозможного.Пока изменение количества данных находится в контролируемом диапазоне, это также хороший выбор для создания центральной сети событий для формирования коммуникационной сети.