Эта статья является более подробным и всеобъемлющим учебником, составленным редактором в сочетании с официальными документами. Это очень хорошо и более подходит для начинающих, чтобы читать.
Эта статья взята из официального документа:
http://cn.vuejs.org/guide/components.html#u7236_u5b50_u7ec4_u4ef6_u901a_u4fe1
Компонентная компонента родительского ребенка
① Доступ к детским компонентам, родительским компонентам и корневым компонентам;
это. $ Parent Access Parent Component
это. $ Childrens обращается к детским компонентам (это массив)
Это. $ Root Потомка корневого экземпляра обращается к корневому экземпляру
Пример кода:
<div id = "app"> родительский компонент: <input v-model = "val"> <br/> дочерний компонент: <test: test = "val"> </test> </div> <cript> var vm = new Vue ({el: '#App', data: {val: 1}, компонент: {test: {props: ['test'], template: "Найти @specpare @ @specpare @witd props: v-model = 'test'/> ", методы: {findparent: function () {console.log (this. $ parent); // Доступ к консоли корневого компонента. // Проверьте, являются ли родительский компонент и корневой компонент конгруэнтными (потому что его родительский компонент является корневым компонентом)}}}}}}); </script>Когда клавиши появляются в поле ввода подкомпонента, отображаемое содержимое:
Значение входного окна родительского компонента и родительского компонента (по умолчанию 1), 0 (представляет, что это первый элемент в атрибуте ребенка родительского компонента) и True (потому что родительский компонент является корневым компонентом, он конгруэнтен);
Таким образом, взаимодействие может быть выполнено в дереве компонентов.
②custom события:
Прежде всего, события должны быть помещены в свойство событий, а не в собственность методов (ошибка, которую, вероятно, совершат новички). Они могут только запускать события в свойстве событий, в то время как события в свойстве методов не могут быть запускаются.
Во -вторых, существует разница между распределением вверх и нисходящей трансляцией: распределение вверх вызовет одноименное событие, в то время как нисходящая трансляция не будет;
В -третьих, распределение вверх и нисходящее вещание будет запускать только события для прямых линий (детей или родителей, за исключением предков и внуков) по умолчанию и будет продолжаться по этой строке, если не верно значение события.
В -четвертых, событие не может быть вызвано явно через это. Название события.
Пример кода:
<div id = "app"> родительский компонент: <button @click = "parentclick"> нажмите, чтобы распространять трансляцию вниз </button> <br/> Детский компонент 1: <chileds1> </kids1> <br/> Другой дочерний компонент 1: <orething-Children1> </nother-children1> </div> <script> var vm = new vue (el: '#,#, vamp: al Method: al Method: al Method: al Methods: al Methods: al Methods: al Methods: al Methods: al Methods: al Methods: al Methods: al Methodcave: al Method parent Значение и не будет продолжать распределять реквизиты: ['test'], шаблон: "<Tood> kids1 </button> </br> Подкомпонент 2: <Kids2> </kids2>", события: {childrenclick: function () {console.log ("Childrenclick-child1"); Console.log ("ParentClick-Children1"); {childrenclick: function () {console.log ("childrenclick-children2"); Он будет продолжать распространять реквизиты в детские компоненты дочернего компонента: ['test'], шаблон: «<Tood> notherChildren1 </button> </br> Другой дочерний компонент 2: <orething-children2> </ore-cillren2>, события: {Childrenclick: function () {console.log (childrenclick-anotherren1; (msg) {console.log ("ParentClick-AnotherChildren1"); это. $ Dispatch ('childrenclick'); }}}}}}}}}}}}}}}}}}}}}}}} / }}}}}}}}}}}}}}}}}}}}}}}} / }}}}}}}}}}}}}}}}}}}}}}}} / }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}иллюстрировать:
【1】 Нажмите кнопку родительского компонента, и она будет транслироваться вниз, а затем запустить сам дочерний компонент 1, другой дочерний компонент 1 и другой дочерний компонент 2;
【2】 Нажатие на кнопку дочернего компонента 2 вызовет событие дочернего компонента 2 и событие дочернего компонента 1, но не запустит кнопку родительского компонента;
【3】 Нажатие на кнопку другого дочернего компонента 2 вызовет событие другого дочернего компонента 2, событие другого дочернего компонента 1 и событие родительского компонента (потому что возвратное значение события другого дочернего компонента 1 является истинной);
③ Используйте v-on, чтобы связать пользовательские события:
[1] Проще говоря, когда дочерний компонент запускает событие (метод в событиях), родительский компонент также выполнит метод (метод в методах родительских компонентов).
[2] Запускаемое привязка записывается в шаблоне (то есть шаблон шаблона, который заменяется). Многочисленные дочерние компоненты могут связывать метод родительских компонентов, или разные компоненты дочерних компонентов могут связывать другой метод родительских компонентов, но одно и то же событие дочернего компонента не может связывать метод.
【3】 Дочерний компонент отправляет параметры для передачи сообщений. Даже если событие дочернего компонента не имеет параметров, оно не влияет на метод передачи параметров родительскому компоненту (то есть метод родительского компонента может принимать параметры, полученные методом дочернего компонента)
В качестве примера:
<div id = "app"> родительский компонент: <Tlond> Нажмите, чтобы распространять трансляцию </button> <br/> Дочерний компонент 1: <!-Здесь записывается привязка. Многочисленные привязки могут быть связаны с одним и тем же, или разные привязки различны, но множественные не могут быть связаны с одним-> <kids v-on: test = "parent" @test2 = "fore"> </kids> </div> <script> var vm = new vue ({el: '#App', data: {val: 1}, методы: {parent: function (arg) {console. Event ");}, другое: function () {console.log (" Другой метод ");}}, компоненты: {дети: {// Это не имеет возвратного значения и не будет продолжать распределять реквизиты: ['test'], шаблон:" <Tline @Click = 'ChildClick'> childra1 </button> </br> <Кнопка @click = 'kildclick2'> "kids1 <//button </button> </button> witdclick1 <//button </button> </button </blothe @chlick = 'witdclick1 <//button </withly witch =' wildclick 2 ' childclick: function () {this. $ emit ("test", 'аргумент для диспетки); }); </script>④ Индекс подкомпонента
Проще говоря: вы можете напрямую получить подкомпоненты из индекса, а затем вы можете вызвать методы каждого подкомпонента.
Метод добавления индекса: добавить v-ref в тег: имя индекса
Метод вызова компонента: vm. $ Ref. Имя индекса
Вы также можете использовать это. $ Ref. Имя индекса непосредственно в родительском компоненте
В настоящее время вы можете получить компонент, а затем компонент может вызвать свои методы или использовать его данные.
Пример кода:
<div id = "app"> родительский компонент: <button @click = "todo"> События, запускающие дочерний компонент </button> <br/> Подкомпонент 1: <!-Переплет записывается здесь. Многочисленные привязки могут быть связаны с одной и той же, или разные привязки различны, но множественные не могут быть связаны с одним-> <children v-ref: kild> </kids> </div> <cript> var vm = new Vue ({el: '#App', методы: {todo: function () {this. $ Refs.child.fromPent (); // Призывание ребенка Component's Motherparent etrext etxprent); {Дети: {// Это не имеет возврата и не будет продолжать распространять реквизиты: ['test'], шаблон: "<Tood> children1 </button>", методы: {OffParent: function () {console.log ("wappened from Parpent по ссылке"); </script>Выше приведено статья 10-й статьи 10-й компоненты компонента родительского ребенка Vuejs. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!